If you’re viewing this on Internet Explorer, download a proper browser then take another look!
I’ve been looking lately into what you can do nowadays with good browsers and webkit transitions to add little moving flourishes to site design. I think if these transitions are employed subtly and not obtrusively they can be really cool. It also means that you can add an effect when changing from one style to another using CSS3 without having to employ Flash or Javascript. Of course, you have to remember that Internet Explorer doesn’t support these transitions.
In the example below, I’ve just added an ease-in-out to an H1 class with a ribbon image background. When hovered over you get a subtle movement of the banner that would be cool for an a:link to another page.
.ribbon-header {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.ribbon-header, article:hover >.ribbon-header {
padding: 0 3.5em 0 2em;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
You can do lots of crazy stuff. Hover over the Twitter icon below to see it spin. The heart icon changes colour from black to red and moves from left to right. These are just quick examples, you can finesse them more and decide what you want to do with the animation and transitions.
Just remember, you need to apply the Vendor prefixing for the different browsers: -moz- for Firefox 5+, -webkit- prefix for Safari, Chrome and the various mobile webkit browsers and without any prefixes, for when browsers support the vendor-neutral syntax.
*Incidently, the icons above are also a neat way of displaying icons in CSS instead of what would usually be image pngs or gifs. It’s a Font Awesome application in which you call a font awesome @fontface family in your CSS style sheets and then control font size, font weight, colour and all that good stuff. My pal Eesur has a great article about it here.
