10 (More) CSS Tricks You Probably Overlooked

But unlike display:none which modifies the table layout after removing the space, the layout remains the same in visibility:collapse. You can see how it works in more detail over here.

mix-blend-mode: color; 

I took two elements, an img showing the image of a rose and a span with a graphic background, stacked them and applied a few mix-blend-modes.

background-blend-mode: difference; 

1. Write Vertically

resize: vertical; resize: horizontal; resize: both; resize: none; 

There are plenty of CSS snippets that web developers can use to achieve certain results, and then there are CSS tricks that you can use for things like aligning content vertically. With CSS being an ever evolving entity, time and time again we stumble upon cool CSS tricks that are fun to know.

An element can be made resizeable (vertically, horizontally or both) with the CSS3 attribute resize . The resizeability in a textarea can be be disabled using the same.

horizontal-tb is the default and it causes the typical left to right horizontal text flow in an element.

When you assign visibility: collapse on a table element , it is hidden and its space is filled by the nearby content – like how it would behave on using display:none instead.

2. Reuse Color Value

The keyword currentColor carries the value of color attribute and can be used in other attributes which accept color values like background.

visibility: collapse is an attribute created just for the table elements, like rows and columns. If used on anything else it’ll behave like visibility: hidden. Chrome though treats it like hidden even for table elements.

3. Blend Backgrounds

div{ background: linear-gradient(90deg, currentColor 50%, black 50%); ... color: #FFD700; /* currentColor is #FFD700 */ } 

 -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; 

4. Blend Elements

Note: Even though modern IE does support box-decoration-break, at the edge of the split portion border, rendering isn’t smooth and the background looks sliced. But it does render box-shadow nicely, which is why I used box shadows for both border and background. There’s also an absence of horizontal padding in the edges in IE that you may want to fill with spaces.

There’s a CSS attribute called writing-mode that accepts one of these three values; horizontal-tb, vertical-rl and vertical-lr.

An element can have more than one background (a background color and multiple background images). The background-blend-mode blends all of them together as per the given blending mode. There are a total of 16 blend modes at the moment.

5. Ignore Pointer Events

You can create a column layout for your contents using the columns attribute. It lets you specify how many columns (column-count) and how each column width (column-width) are to be rendered in an element.

In the following demo, there’s a checkbox beneath two images stacked above each other. Both images carry pointer-events: none, allowing us to click the checkbox buried under them. Based on the checked state of the checkbox, the desired image is shown while the other hidden.

6. Decorate Split Boxes

In today’s post, I’m introducing you to 10 more CSS attributes and tricks that you might not know.

Now to follow that up with an example and an early "Christmas in the horizon" reminder, here’s a list of Santa’s Reindeer all typed in a single span! Ho! Ho! Ho!

-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; 

This is useful for displaying languages like Chinese and Japanese that are typically written from top to bottom and also for when you wish to display text vertically to save horizontal space, like in table headers.

7. Collapse Table Elements

If the content is other than text, like for example an image, then you’ll have to keep in mind its width respective to the column’s. For the following example, I only used column-count to specify how many columns I want.

Typically when a box is split (like when an inline element witnesses line breaks), the edges of the split portions are devoid of any box styles and look sliced. To avoid that, you can use box-decoration-break:clone.

8. Create Columns

mix-blend-mode blends the contents and backgrounds of overlapping elements. Chrome doesn’t seem to support all of the modes even though Firefox does.

There can be multiple CSS3 gradients (both linear & radial) for a single element and they can be piled on each other to create patterns. This allows us to create nice backgrounds for elements without using external images. Making it work might require a bit of practice though.

9. Make Elements Resizeable

The vertical-* values however are for vertical block flow, causing text to be written from top to bottom by the browsers. In vertical-rl, new lines are added to the left of the previous ones and vice versa for vertical-lr.

You can make an element oblivious to any pointer event by using a single attribute called pointer-events. By giving pointer-events the value of none in an element, this prevents it from being a target to pointer events. IE11+ support included.

10. Create Patterns

Note: If you want to control individual letters’ directions, you can use text-orientation turning them upright or sideways, as desired.


Leave a Reply