HTML and CSS Reference
In-Depth Information
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
believable.
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
6
animations will still depend on these technologies, we can create a compelling illusion of
animation using CSS alone.
7
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:
