SVG animations

It’s been a long time since I posted anything here. Many things got in the way, but now they have past and I can get back to writing about what I love.

I have recently fallen in love with SVG (scalable vector graphics). They’re vectors so they look good on all screens and the code for them can be put directly into the HTML, which means we can then play with it via CSS and/or Javascript. For example CSS3 keyframe animations or transition effects can be applied. You can use media queries to make responsive graphics or you can use some JS to bring the graphics to life in a parallax scrolling site. When combined, this opens up a whole host of options for inserting cool and useful effects. (more…)

CSS gradient patterns

Using the CSS3 background gradient property it is possible to make many repeatable patterns like strips or arrows. Lea Verou has created a wonderful pattern library for these. I wanted to go a bit more in depth on this subject and add a few of my own patterns too. I’ll be going through the use of the various background properties involved in creating these patterns along with some examples. (more…)

Image hover descriptions

In the last few days I have been playing around with CSS3 transforms and transitions for use in an image gallery I’m been working on. I came up with a cool way to keep the gallery looking clean and minimal, while giving the user some extra into about the image when they hover. This effect has been done plenty of times before but often obscures the image while the description is shown, which I feel defeats the purpose of an image gallery, the image should be the main focus after all. (more…)

Fixed headers

You may have noticed that there is a trend for fixed headers going around the internet. It’s generally a good thing too, having the navigation always accessible is certainly beneficial for the user experience along with always having the logo visible. There are times though when the screen real estate is more important, in fact this is important pretty much all the time, specially on mobile devices. There are a couple of different solutions to this problem but one of the best is the shrinking header.