Ten Things You Can Do with CSS (That You Might Not Have Known You Could Do)
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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: