Cheesetoast » transform http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.15 Sideways Text Header http://www.cheesetoast.co.uk/sideways-text-header/ http://www.cheesetoast.co.uk/sideways-text-header/#comments Wed, 21 May 2014 23:44:45 +0000 http://www.cheesetoast.co.uk/?p=1282 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

The post Sideways Text Header appeared first on Cheesetoast.

]]>
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.

See the Pen Sideways Header Rotation by Graham Clark (@Cheesetoast) on CodePen.

The post Sideways Text Header appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/sideways-text-header/feed/ 0