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
I recently incorporated the parallax scrolling effect into a page and I wanted to share the code for it. I’ve seen some pretty sophisticated jQuery plugins that offer some neat options but this is just a simple lightweight version. Continue reading
Using the href attribute, HTML5 offers a way to add phone numbers as an anchor link in the same way you can link to a url. Clicking on the number on a smartphone will initiate a call. 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
This useful little snippet can be used for making elements slide on from the side of a page as the user scrolls down. It uses jQuery to detect the scrolling point on the page and a CSS3 transition to slide an image in from the right of the screen. Continue reading
One of the new abilities of HTML5 is that it allows you to add a custom data attribute to your markup. This is useful for when you want to include some metadata in your markup.
The new data attribute look like this: data-file=”stylesheet1″
The attribute must be prefixed with “data-” and should be all lower case.
Read more for an example of the data attribute in action. Continue reading
It’s been over a month now since Google announced that it was shutting down Google Reader. The closing of the much loved RSS client has caused a lot of ripples in the online community. This post talks about a few of the alternatives to Google Reader. Continue reading