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.

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;

See the Pen writing-mode CSS attribute by Preethi (@rpsthecoder) on CodePen.

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 */
  }

See the Pen currentColor CSS Attribute by Preethi (@rpsthecoder) on CodePen.

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;

See the Pen background-blend-mode CSS Attribute by Preethi (@rpsthecoder) on CodePen.

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.

See the Pen mix-blend-mode CSS Attribute by Preethi (@rpsthecoder) on CodePen.

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.

See the Pen pointer-events CSS Attribute by Preethi (@rpsthecoder) on CodePen.

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.

See the Pen box-decoration-break CSS Attribute by Preethi (@rpsthecoder) on CodePen.

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.

See the Pen visibility: collapse CSS by Preethi (@rpsthecoder) on CodePen.

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;

See the Pen column-count CSS by Preethi (@rpsthecoder) on CodePen.

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;

See the Pen CSS Resize by Preethi (@rpsthecoder) on CodePen.

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.

See the Pen Watermelons CSS gradient by Preethi (@rpsthecoder) on CodePen.

Source: Hong Kiat