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 or displaying text on image. With CSS being an ever evolving entity, time and time again we stumble upon cool CSS tricks that are fun to know.
In today’s post, I’m introducing you to 10 more CSS attributes and tricks that you might not know.
There’s a CSS attribute called
writing-mode that accepts one of these three values;
horizontal-tb is the default and it causes the typical left to right horizontal text flow in an element.
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
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.
Note: If you want to control individual letters’ directions, you can use text-orientation turning them upright or sideways, as desired.
currentColor carries the value of
color attribute and can be used in other attributes which accept color values like
/* currentColor is #FFD700 */
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.
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.
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.
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.
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.
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
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!
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.
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.
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 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.
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.
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.
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.
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.