# CSS Tricks That You Probably Overlooked

**URL:** <https://onehack.st/t/css-tricks-that-you-probably-overlooked/177895>\
**Category:** Tutorials & Methods\
**Tags:** programming, freebies, tips-tricks\
**Created:** [April 6, 2021, 10:51am UTC](https://onehack.st/t/css-tricks-that-you-probably-overlooked/177895 "2021-04-06T10:51:33Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![PlayBoy83](https://onehack.st/user_avatar/onehack.st/playboy83/32/164314_2.png) [@PlayBoy83](https://onehack.st/u/PlayBoy83)\
**Post date:** [April 6, 2021, 10:51am UTC](https://onehack.st/t/css-tricks-that-you-probably-overlooked/177895/1 "2021-04-06T10:51:33Z")

</div>

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

#### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation) turning them upright or sideways, as desired.

`-webkit-writing-mode: vertical-rl;`

` ` `-ms-writing-mode: tb-rl;`

` ` `writing-mode: vertical-rl;`

 ![1-](https://onehack.st/uploads/default/original/3X/b/f/bf6934a2afc9b80fccce9f089b2663bc9f8d5b82.png)

#### 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(` `90` `deg, currentColor ` `50%` `, ` `black` `50%` `);`

` ` `...`

` ` `color` `: ` `#FFD700` `;`

` ` `/* currentColor is #FFD700 */`

` ` `}`

 ![2](https://onehack.st/uploads/default/original/3X/e/7/e7f445de8871e9d6e370beb4d86363028c33eb55.png)

#### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode) at the moment.

`background-blend-mode: difference;`

 ![3](https://onehack.st/uploads/default/original/3X/2/3/23c3763533aaa9e40223f7699017c8c03f13318b.png)

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

 ![4](https://onehack.st/uploads/default/original/3X/8/f/8f2dab92f0dbed8050cfcae6c548aa308c0b1c4d.png)

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

 ![5](https://onehack.st/uploads/default/original/3X/f/9/f98acdaa89ad671eb8434b39db6733d0ed25e2d4.png)

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

 ![6](https://onehack.st/uploads/default/original/3X/d/2/d2bfdfa863480a70da131a935a2efb52a5ed3a18.png)

#### 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](https://staff.washington.edu/fmf/2010/02/19/what-is-visibility-collapse/#exrow).

 ![7](https://onehack.st/uploads/default/original/3X/3/5/35774c33df91115c9d2e4b34940176b4a74b9125.png)

#### 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` `;`

 ![8](https://onehack.st/uploads/default/original/3X/4/e/4eca0ea98a879e1c10e99e97af3c4b680aa88eb9.png)

#### 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` `;`

 ![9](https://onehack.st/uploads/default/original/3X/1/3/13f67d20063bf6aeeae4cdf49610094da75430fd.png)

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

 ![10](https://onehack.st/uploads/default/original/3X/c/a/ca284bec8469ed598052ed621aa123dd89ca626a.png)

`Source: hongkiat`

**Happy learning!**