10 (More) CSS Tricks You Might Have Missed

Did you know that there are tons of awesome CSS tricks that web developers can use to achieve amazing results? It’s true! And today, I want to share with you 10 more intriguing CSS attributes and tricks that you might not be familiar with yet!

Let’s dive right in!

1. Writing Vertically

Have you ever wanted to write text vertically instead of the usual horizontal way? With CSS, you can do just that! There’s a neat attribute called “writing-mode” that allows you to control the flow of text in your elements. It has three possible values: “horizontal-tb,” “vertical-rl,” and “vertical-lr.”

The default value, “horizontal-tb,” is what you’re probably used to seeing – it makes text flow from left to right. But with “vertical-rl” and “vertical-lr,” you can make your text flow vertically, adding an interesting visual twist to your designs!

If you want to display languages like Chinese and Japanese, or if you need to save horizontal space by displaying text vertically, this is a useful trick. It’s also handy if you want to control the direction of individual letters. Just use the text-orientation property to turn them upright or sideways, whichever you prefer.

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

Here’s a nifty trick: the keyword currentColor carries the value of the color attribute, so you can use it in other attributes that accept color values, like background. This way, you can easily reuse the same color throughout your code, keeping everything consistent.

Here’s another cool tip: you can blend backgrounds to create unique effects. Just use the background-blend-mode property and experiment with different blending modes like multiply or screen. This can add depth and richness to your design, making it stand out from the crowd.

An element can have multiple backgrounds, including a background color and multiple background images. The background-blend-mode property allows you to blend them together using different blending modes. Currently, there are 16 blend modes available.

To apply a blending mode to your backgrounds, you can use the background-blend-mode property followed by the desired blending mode. For example:

background-blend-mode: difference;

Another property called mix-blend-mode allows you to blend the contents and backgrounds of overlapping elements. However, it’s worth noting that not all blending modes are supported in Chrome, unlike Firefox.

To use mix-blend-mode, simply specify the desired blending mode after mix-blend-mode. For example:

mix-blend-mode: color;

I tried this out by taking two elements: an image of a rose and a span with a graphic background. I stacked them together and applied different mix-blend-modes to see the effects.

Lastly, there is a property called pointer-events that allows you to control how an element responds to pointer events such as clicks or taps. By setting pointer-events to “none”, you can make an element completely ignore these events.

I hope this helps you understand these properties better and encourages you to explore their possibilities!

You have the power to make an element completely invisible to any pointer event with just one special attribute called “pointer-events”. When you give an element the value “none” for pointer-events, it becomes immune to any pointer events. This is something that all browsers starting from IE11 support.

Take a look at the example below. There are two images stacked on top of each other, with a checkbox underneath. Both images have the pointer-events attribute set to “none”. This allows us to click on the checkbox even though it’s hidden behind the images. Depending on whether the checkbox is checked or not, the corresponding image will be displayed while the other one remains hidden.

Now let’s move on to another topic: decorating split boxes. Normally, when a box is split (like when an inline element gets broken into multiple lines), the edges of the split portions look unfinished and not nice. But there’s a solution for that! You can use the “box-decoration-break” property with the value “clone” to make the split portions look seamless and complete.

Just a quick note: Even though modern Internet Explorer supports the box-decoration-break property, there is a slight rendering issue with the sliced background at the edge of the split portion border. However, it does render box-shadow nicely, which is why I used it for both the border and background. There is also a lack of horizontal padding in the edges in Internet Explorer that you may want to fill with spaces.

7. Making Table Elements Disappear

The visibility:collapse property is specifically designed for table elements, such as rows and columns. If you use this property on anything else, it will behave like visibility:hidden. However, Chrome treats visibility:collapse as hidden even for table elements.

When you apply visibility:collapse to a table element, it becomes hidden and its space is occupied by the adjacent content, similar to how it behaves with display:none.

But unlike hiding a table by completely removing it from view (display:none), the visibility:collapse property maintains the table layout while making it invisible. If you want to learn more about how it works, check it out here.

8. Creating Columns

You can organize your content into columns using the columns attribute. This attribute allows you to specify the number of columns (column-count) and the width of each column (column-width) within an element.

If your content includes images or other non-text elements, you need to consider their width in relation to the column. In the following example, I only used column-count to determine the number of columns I want.

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

9. Making Elements Resizable

10. Creating Patterns

Did you know that you can use CSS3 gradients to create beautiful patterns for your website? With just a few lines of code, you can make elements on your page stand out without relying on external images. It’s a clever way to add some visual flair to your design.

So how does it work? Well, you can have multiple CSS3 gradients, both linear and radial, for a single element. These gradients can be stacked on top of each other, creating intricate patterns and unique backgrounds. It’s like painting with colors, but on your webpage!

Of course, creating these patterns may take a bit of practice. It’s like learning any new skill – you might stumble at first, but with patience and persistence, you’ll soon be crafting stunning backgrounds that will impress your visitors.