Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Ten Things You Can Do with CSS (That You Might Not Have Known You Could Do)

  • Print
  • + Share This
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.

With a solid colored slug underneath, you can read the text, but part of the image is obscured.

Get the best of both worlds by using CSS to make the slug semi-transparent.

EXAMPLE:

http://www.webbedenvironments.com/dhtml_css_advanced/code/09_SpecialEffects/TransparentLayers/index.html

  • + Share This
  • 🔖 Save To Your Account