{"id":24997,"date":"2015-10-30T23:01:44","date_gmt":"2015-10-30T15:01:44","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24997"},"modified":"2020-06-29T16:13:18","modified_gmt":"2020-06-29T08:13:18","slug":"css-tricks-more","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-tricks-more\/","title":{"rendered":"10 (More) CSS Tricks You Probably Overlooked"},"content":{"rendered":"

There are plenty of CSS snippets that web developers can use to achieve certain results, and then there are CSS tricks<\/a> that you can use for things like aligning content vertically<\/a> or displaying text on image<\/a>. With CSS being an ever evolving entity, time and time again we stumble upon cool CSS tricks that are fun to know.<\/p>\n

In today\u2019s post, I\u2019m introducing you to 10 more CSS attributes and tricks that you might not know<\/strong>.<\/p>\n

Read More:<\/strong> 10 Simple & Smart CSS Snippets<\/a><\/p>\n

1. Write Vertically<\/h2>\n

There\u2019s a CSS attribute called writing-mode<\/code> that accepts one of these three values; horizontal-tb<\/code>, vertical-rl<\/code> and vertical-lr<\/code>.<\/p>\n

horizontal-tb<\/code> is the default and it causes the typical left to right horizontal text flow in an element.<\/p>\n

The vertical-*<\/code> values however are for vertical block flow, causing text to be written from top to bottom by the browsers. In vertical-rl<\/code>, new lines are added to the left of the previous ones and vice versa for vertical-lr<\/code>.<\/p>\n

This is useful for displaying languages like Chinese and Japanese<\/strong> 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.<\/p>\n

Note:<\/strong> If you want to control individual letters\u2019 directions, you can use text-orientation<\/a> turning them upright or sideways, as desired.<\/p>\n

 -webkit-writing-mode: vertical-rl;\r\n  -ms-writing-mode: tb-rl;\r\n  writing-mode: vertical-rl;\r\n<\/pre>\n