Brain Food for Web Developers

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

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

Author: Graham

My name is Graham and I'm a Scottish web developer living in California. I love working with clean code to make attractive and usable websites. I'm also interested in cooking, gardening, and taekwondo.

Comments are closed.