If you're doing anything in, on, or around Web design, you probably already know the basics of using Cascading Style Sheets (CSS). But just learning a few rules doesn't mean you know everything. There are many subtle (and not-so-obvious) techniques that combine CSS capabilities in ways to get some striking design effects. Jason Cranford Teague shows you 10 of his favorite things to do with CSS (that you might not have known you could do).

From the author of

If you are doing anything in, on, or around Web design, you probably already
know the basics of Cascading Style Sheets (CSS). But learning a few rules
doesn’t mean you know everything. There are many subtle (and
not-so-obvious) techniques that combine CSS capabilities in ways to get some
striking design effects. Here are 10 of my favorites.

1. Transparent Backgrounds

One of the great frustrations of Web design is integrating text into graphics
without having to resort to "baking" the text directly into the art—that
is, using a program like Photoshop to create graphic text. Using CSS, you can
place HTML text directly over any graphic, but text over graphics is often
difficult to read, especially if the graphic has widely varying contrasts.
Simply covering the image with a solid color layer under the text (called a
slug) is equally unsatisfying since it obscures part of the image.

To overcome this problem, we need to place a solid-color slug behind the text
to mute the image enough so that the text is easier to read. However, the slug
needs to be transparent enough to allow the image to show through.

Most modern browsers now support the opacity property, which allows you to
set an opacity value for an object between 0.0 (clear) and 100 (solid). Internet
Explorer for Windows, however, does not recognize the opacity property, but
does support its own proprietary ActiveX filter to achieve the same effect.
You can include both the opacity property and the Internet Explorer filter
in the same CSS rule without conflict.

Text directly on an image will save space, but is generally illegible.