28th April 2012

Pure CSS opacity and how to have opaque children

Opacity is a desirable thing in this day and age; especially with the design trends that typified the web2.0 movement. There are a few ways of doing this that I'll discuss but this super-short tutorial is about CSS opacity.

CSS opacity

You'll most likely want to use this when you've got a div on top of a background image or pattern. I'll use the StevenYork.com background as the example in the demo, showing two different methods of achieving CSS opacity:

Look at the above image, this shows the result of two different approaches; one where the children inherit the opacity (so any content within the div assumes the same opacity), the other where content can have an entirely different opacity level. Let's look at how to achieve this:

XHTML

I've broken the XHTML down into two boxes, one showing container one; where the children inherit the opacity. This is the most simple approach because you simply have a container and content within it. However, it's the least desirable because you're unlikely to have divs without any content within them...

<!-- container one starts --> <div id="container"> <h1>Children inherit the opacity</h1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean gravida. Sed blandit, neque non adipiscing sagittis, tortor nisi consequat eros, a posuere sem augue sit amet nibh. Morbi at leo. Vestibulum porta, eros id congue molestie, leo eros facilisis neque, at ullamcorper nisi mauris non quam. Suspendisse vel erat vel nulla molestie egestas. In sit amet mauris quis eros elementum semper. Curabitur suscipit molestie nibh. In euismod ligula vel diam pharetra feugiat. Morbi suscipit fermentum elit. Curabitur imperdiet urna eu sapien. </div> <!-- container one ends -->

Secondly we have the second container with the more complicated structure to allow for the children to be independant of the opacity. What we see here is the overall container again, but I've introduced a transparency div which handles the opacity itself, with another div wrapping the content. I'll explain why in the CSS bit.

<!-- container two starts --> <div id="container2"> <div class="transparency">   </div> <div class="content"> <h1>Using layers and positioning so children have 100% opacity</h1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean gravida. Sed blandit, neque non adipiscing sagittis, tortor nisi consequat eros, a posuere sem augue sit amet nibh. Morbi at leo. Vestibulum porta, eros id congue molestie, leo eros facilisis neque, at ullamcorper nisi mauris non quam. Suspendisse vel erat vel nulla molestie egestas. In sit amet mauris quis eros elementum semper. Curabitur suscipit molestie nibh. In euismod ligula vel diam pharetra feugiat. Morbi suscipit fermentum elit. Curabitur imperdiet urna eu sapien. </div> </div> <!-- container two ends -->

CSS

Again, I'll break things down into two blocks to explain the two different approaches. First we have the instance where children inherit the opacity:

#container { padding:20px; width:300px; color:#FFFFFF; position:relative; background-color:#000000; float:left; opacity:0.5; filter:alpha(opacity=50); -moz-opacity:0.5; }

Very straight forward here; I'm just giving it basic layout but it's the final 3 lines that you need to look at. The obvious question is "why do we need three different CSS statements to achieve basic transparency?" and the answer is because different browsers capture this information differently. Opacity satisfies Opera (and Safari I believe), -moz-opacity satisfies Firefox while the filter is purely for IE. Awkward = yes. However with these three lines you can get decent cross browser CSS opacity

Now let's look at the more practical approach of getting the content to have a different opacity to the container:

#container2 { padding:20px; width:300px; color:#FFFFFF; position:relative; float:left; margin-left:20px; overflow:hidden; } #container2 .transparency { opacity:0.5; filter:alpha(opacity=50); -moz-opacity:0.5; background-color:#000000; width:340px; height:1500px; position:absolute; top:0px; left:0px; z-index:-1; } .content { position:relative; }

I'm creating the container again, but this time it's not got any opacity CSS associated with it. It's got layout, padding, font colours etc but no opacity. Because I've got position:relative on the container I can use that transparency div absolutely, meaning it will sit on-top of the container. Also because I've given the container an overflow of hidden, it means that the transparency div can have a large width and height without breaking the layout. So transparency sits within the container but positioned absolutely, meaning the content div (positioned relatively) doesn't inherit the opacity and therefore has white text. The negative z-index is to ensure that the content div sits on top of the transparency div (although this was only an issue in Opera).

Therefore my content can expand up to 1500px in height and the transparency div will continue to show correctly (obviously that figure can be increased). Nice, simple CSS opacity in a cross browser manner.

Opacity using images

However, it's far easier to handly opacity using images. The PNG image format can handle opacity (although remember PNG transparencies don't work under IE6 without hacks) so it's worth sticking with PNGs for now (although that's up to you). If you create a 1x1 PNG with the required transparency, you can use this as a background image on the container (as per the example that inherits the opacity) and it'll look exactly like the second example.

Using images the markup will be cleaner (as there's less of it) and you'll only run into cross-browser problems with IE6 (but this is easily resolved), so I'll normally just use that method. But if you want CSS opacity, this tutorial should help you enough to get going.

Browsers and stuff

I tested this tutorial and the supplied demo/download in Firefox 2, Opera 9.5, IE6 and IE7 so it should be fine. As normal, drop me an email if I'm lying.

Additional Reading

Because there are so many different implementations or indeed reasons for needing to do this, it's worth looking at other examples on the Internet. Here is a simple tutorial for beginners that discusses simple CSS3 techniques, tips and tricks.

Tagged with css, xhtml