10 (Extra) CSS Tips You In all probability Ignored

There are many CSS snippets that net builders can use to realize sure outcomes, after which there are CSS tricks that you need to use for issues like aligning content vertically. With CSS being an ever evolving entity, time and time once more we come across cool CSS tips which are enjoyable to know.

In as we speak’s submit, I am introducing you to 10 extra CSS attributes and tips that you simply won’t know.

Learn Extra: 10 Simple & Smart CSS Snippets

1. Write Vertically

There is a CSS attribute referred to as writing-mode that accepts certainly one of these three values; horizontal-tb, vertical-rl and vertical-lr.

horizontal-tb is the default and it causes the standard left to proper horizontal textual content movement in a component.

The vertical-* values nevertheless are for vertical block circulate, inflicting textual content to be written from prime to backside by the browsers. In vertical-rl, new strains are added to the left of the earlier ones and vice versa for vertical-lr.

That is helpful for displaying languages like Chinese language and Japanese which are sometimes written from prime to backside and in addition for once you want to show textual content vertically to save lots of horizontal area, like in desk headers.

Word: If you wish to management particular person letters’ instructions, you should 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 Colour Worth

The key phrase currentColor carries the worth of shade attribute and can be utilized in different attributes which settle for shade values like background.

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

See the Pen <a

The post 10 (Extra) CSS Tips You In all probability Ignored appeared first on DICKLEUNG DESIGN 2014.