HTML and CSS Reference
Nova family used by David DeSandro. Also, we should be careful to avoid text-shadows that
are too big for the font. Tweak your settings with this in mind until the animated extrude looks
Finally, this technique will not work in IE , because text-shadow is unsupported in all
versions of IE (even IE9).
2. Animating A Background Image
While we can easily animate text with a few lines of code, animating an image usually requires
bigger and slower assets, such as animated GIFs or Flash or HTML5 video. While complex
animations will still depend on these technologies, we can create a compelling illusion of
animation using CSS alone.
Love Nonsense uses a hover effect to alter the color of the images on the website. The trick
here is to use a transparent PNG with a background color. The color of the PNG should match
the website's background, so that all of the transparent areas in the PNG show up when filled
with a background color. Thus, the PNG should contain the negative space of the image you
want to display (i.e. the shape you want should be transparent, and everything else should be
the same color as the background).
Here's an example of the Smashing Magazine logo with negative space: