Cheesetoast

Brain Food for Web Developers

SIdeways header

May 21, 2014
by Graham
Comments Off on Sideways Text Header

Sideways Text Header

I was recently playing around with the idea of having the header for a block turned sideways.
In my example I created a thick left border for the heading. After rotating the text using the CSS transform (I used bourbon in my example to cover vendor prefixes) I had to sort out the positioning with transform-origin set to 0, 0. Then I used a margin left to place it in the border space. Continue reading