with Lorelle and Brent VanFossen

CSS Tips and Tricks – Backgrounds and Transparencies

We’ve done a lot of different CSS experiments, pushing CSS to its limits with fun and jazzy text, filters, horizontal and vertical flipping, and more, and now it’s time to tackle some fun with more filters.

Be sure and check out more of our CSS Experiments to help you expand your imagination with what is possible with CSS.

Background Transparency CSS Filter

In addition to shadow and drop shadow filters, another popular filter is the alpha transparency filter. Primily recognized by Microsoft Internet Explorer, more browsers are starting to recognize this filter. We used this effect in one of our demonstration layout pages. The alpha transparency filter creates semi-transparent content allowing the background to be visible through the transparency. For web page designers, this opens up a whole new range of artistic possibilities.

NOTE: More information on CSS transparency filters that work with Firefox can be found at Mandarian Design CSS Opacity Transparency Filters and CSS Opacity for Mozilla Firefox and Other Browsers.

The level of transparency (or opacity) is controlled by a fraction or percentage. The higher the number, the less transparency. For instance, 20% or 0.2 opacity would be very transparent and 80% or 0.8 would be almost solid.

The alpha transparency filter can be used on images, text and containers for a variety of design features. There are a few drawbacks, though. Everything within an alpha transparency filter container fades. For example, to the left is the fully opaque box with text in it and to the right is the same box with the 50% opacity alpha transparency filter applied. As you can see, not only has the box’s background faded, the text color has also faded.

At 100% opacity, this is the original box.
At 50% filtered opacity, this is the box
<div style=”display:block; width:150px; background:#000099; color:yellow; font-size:1.3em; padding:5px; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; -khtml-opacity:.5“>At 50% filtered opacity, this is the box.</div>

When used against a backdrop, such as a colored background, you can see the transparency even more. Notice in the box to the right how the background is visible through the box and the text. Instead of yellow, the text is blending with the light blue background to make it green, changing the colors within the overlaying container.

At 100% opacity, this is the original box.
At 50% filtered opacity, this is the box
 
<div style=”display:block;
height:150px;
width:200px;
background:#00FFFF”>
<div style=”color:yellow;
height:100px;
width:150px;
background:#000099;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
-khtml-opacity:0.5;
font-size:1.3em;
padding:5px”>
At 50% filtered opacity, this is the box
</div></div>

When used with an image in the background, the effect is mesmerizing.

30% opacity against the flower

Look closely at this example. The white box in which the text resides is partially transparent, allowing the flower photograph to be visible through the box. Unlike the above boxes where the text became transparent right along with the parent container, the text in this example isn’t transparent. It is solid and you can’t see the flower through the text.

There are several ways to achieve this effect. One is by layering of containers using the z-index. The z-index takes advantage of the power of CSS to not only create containers within containers on a linear basis, but also in 3 dimensions. The z-index works the CSS layers to determine what is in front or behind what container, adding depth to web page designs. Using absolute positioning, two containers, one with the transparency effect and the other with the content, can be positioned over each other using the z-index. Some of the links below describe this technique.

Unfortunately, using absolute positioning contrains a web page design to absolutes. The more absolute positions you use in your layout and design, the stricter your web page layout structure becomes and the more confined it is to one fixed width browser window, creating space at the sides of web pages viewed with high resolution screens.

Using a great technique by Ove A. Klykken, a Norwegian freelance web designer, we use the power of CSS’s relative positioning and hierarchy of parent-child, and a little creative use of CSS wildcards, we can create three containers with the following rules:

CSS Style Sheet:
/* Parent division with background image */
#backtrans {
float:left; width:161px; height:241px; padding:5px; background:url(blueeye1.jpg) no-repeat}

/* Transparent text area */
#transbox { width:130px;
margin-left:10px;
margin-top:25px;
background:#FFFFFF;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
-khtml-opacity:0.5;
}

/* Asterick represents wildcard for child dependents of #transbox */
#transbox * {position: relative}

/* Text div – lacks transparency */
#transbox div {padding:10px;
color: #000;
font-weight:bold}

HTML Structure:

<div id=”backtrans”>
<div id=”transbox”>
<div>
30% opacity filter against the flower
</div>
</div>
</div>

However, this technique does not work in Firefox. I’ve poked and poked and so far have been unable to make it work. The filter works but it applies to all containers within the parent container. I’m still working on a solution, and have a bit of one found on one of our CSS test pages. View it both in Internet Explorer and Firefox to see the drastic differences as each browser interprets the CSS differently. View the source files and the CSS to see the differences in the code.

Alpha transparency filters are not all equal when it comes to various web browsers. To make sure you catch whatever browser is coming your way, you can set the alpha transparency filter to cover all the bases. If a browser doesn’t recognize the transparency filter, it will just ignore it and the containing box will become solid. Here are the differences for the different browsers for 30% opacity:

.filter {
filter:alpha (opacity=30); /* MS Internet Explorer */
filter:progid:DXImageTransform.Microsoft.Alpha
(style=0, opacity=30) /* MS Internet Explorer proprietory */
-moz-opacity: 0.3; /* Mozilla v1.6 and below */
opacity: 0.3; /* CSS-3 Standards */
-khtml-opacity:.3 /* Safari */
}

Alpha Transparency Filter – Links and Resources

16 Comments

  • WordPress › Error

    There has been a critical error on this website.

    Learn more about troubleshooting WordPress.