10 (More) CSS Tricks You Probably Overlooked

By . in Coding. Updated on .

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.

Read More: 10 Simple & Smart CSS Snippets

1. Write Vertically

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

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

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.

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.

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

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.

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

3. Blend Backgrounds

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.

background-blend-mode: difference;

4. Blend Elements

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.

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.

5. Ignore Pointer Events

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.

6. Decorate Split Boxes

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.

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.

7. Collapse Table Elements

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 instead.

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.

8. Create Columns

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.

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

9. Make Elements Resizeable

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.

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

10. Create Patterns

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.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail