Tuesday, July 22, 2014

Rotating Text & Making Columns with CSS3


I saw a page layout in the Costco store magazine and wanted to try to reproduce it using CSS3. Something that looked simple enough turned out to be a time-wasting challenge with CSS so before long my design took a different turn. The new column property has its uses but comes with its own quirkiness.

This is an example of rotating text and dividing your text into a number of columns using the new CSS properties, transform:rotate(), column-count and column-gap. The class for the dropcap is included at the end of the style block.

Picture Credit: Fall Foliage image is by David Wagner and in the public domain.
Lopsang "Tea" Souchong is a kind of tea and not a real name.
Mindful Matters, Costco Connection, July 2014

Post a Comment