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


December 19, 2013
by Graham

Pseudo Element CSS Sprites

CSS sprites are a great way to cut down on page size and increase website performance. It may not always seem like a lot but every bit helps and the less http requests made the better. Ideally, you want to keep decoration separate from the markup and that’s where CSS pseudo elements come in, specifically :before and :after.
Now we have a way of combining spiriting with pseudo elements. Continue reading

Lined Paper

April 11, 2013
by Graham
Comments Off on Lined Paper with CSS

Lined Paper with CSS

Continuing on from my previous article on a CSS paper stack, I found a way to take the paper theme a little further with lined paper. Basically we use a repeat CSS3 gradient to create the lines on the page. Read … Continue reading


November 6, 2012
by Graham
Comments Off on Custom Scrollbars for Webkit Browsers

Custom Scrollbars for Webkit Browsers

Having just learned how to customize the scrollbar on webkit browsers I thought I’d update Cheesetoast with a shiny new scrollbar and share the process. If you’re already using a webkit browser you should already see that this site now has new vertical and horizontal scrollbars. Continue reading