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

CSS Folder

August 8, 2011
by Graham
Comments Off on CSS3 Text Effects

CSS3 Text Effects

Looking for ways to jazz up your website? With new CSS3 techniques it’s easy to add some nifty text effects that can make your site really stand out. What’s great about these effects is that they degrade gracefully; that is to say that, if a browser (in this case, Internet Explorer) does not support the new CSS rules, there is a satisfactory fallback.
Check out the demo of some text-shadows in action. Continue reading