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
Here’s a pure CSS slide out menu I was playing around with on codepen. It uses some (random) font icons that expand to show the wording. Continue reading
Here’s a little keyframe animation I was working on to display the date/time along with the current weather. Continue reading
December 19, 2013
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
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
March 25, 2013
This bit of CSS helps to add some decoration to a standard box area. Using the rotate effect we can make an area appear like a stack of paper notes. Continue reading
February 14, 2013
Here’s a useful bit of code for converting images to black and white using CSS. This can be useful when you want to add a grayscale-to-colour hover effect to your images. Continue reading
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
A great way to make your menu buttons more interesting is to add some icons. Adding graphics to a page can add a lot of character to your site and help draw attention to the navigation elements. Continue reading