CSS3 Opacity.. Transparency.. Lucidity.. A wee bit see-through… whatever you want to call it! Herein is a guide to using the Opacity declaration in CSS 3 along with some tutorial examples. There is also the quick + / – guide to which browsers support the herein effect.
The declaration ‘opacity’ sets the value to how opaque an elements is: layer, text, image, etc… An element with opacity value 1.0 will be fully opaque (visible) while an element with opacity value 0.0 will be the complete opposite, invisible. Any value inbetween will determine how opaque (or transparent) the element is.
Cross Brower Compatability
Opacity is, I’m glad to say, one of the more supported CSS 3 declarations… of course, omitting IE currently from that list…
All articles in the CSS3 will be updated to show future support & development.
CSS 3 Opacity (Example 1 : Layers)
The above opacity example is set in another layer containing a completely random, never seen before background and each layer uses the following CSS:
- CSS 3 Opacity (Example 1)
- div.L1 { background:#036; opacity:0.2; width:575px; height:20px; }
- div.L2 { background:#036; opacity:0.4; width:575px; height:20px; }
- div.L3 { background:#036; opacity:0.6; width:575px; height:20px; }
- div.L4 { background:#036; opacity:0.8; width:575px; height:20px; }
- div.L5 { background:#036; opacity:1.0; width:575px; height:20px; }
Current Browser Support (Tested, Jan 2009)
- FireFox (3.0.5)
- Google Chrome (1.0.154.36)
- Internet Explorer (IE6, IE7, IE8..)
- Opera (9.6)
- Safari (3.2.1, Windows)
An example for those on alternative browsers not seeing the different levels of opacity…
CSS 3 Opacity (Example 2 : Images)
We can also apply different levels of opacity to images as in the above example. I actually used levels of opacity on my website some years ago now for a gallery and it worked really quite nicely, with a slightly opaque image that on :hover, reached 100% opacity (Example here). I will be quite glad if this now makes into the w3c standards.
- CSS 3 Opacity (Example 1)
- img.1 { opacity:0.25; width:150px; height:100px; }
- img.2 { opacity:0.50; width:150px; height:100px; }
- img.3 { opacity:0.75; width:150px; height:100px; }
Current Browser Support (Tested, Jan 2009)
- FireFox (3.0.5)
- Google Chrome (1.0.154.36)
- Internet Explorer (IE6, IE7, IE8..)
- Opera (9.6)
- Safari (3.2.1, Windows)
An example for those on alternative browsers not seeing the different levels of opacity…
Zen Elements Blog | CSS3 Series
- CSS3: Introduction
- CSS3: Border Radius
- CSS3: Border Color
- CSS3: Shadows
- CSS3: Background Images
- CSS3: Multiple Column
- CSS3: Embedding A Font Face
- CSS3: Opacity
- CSS3: RGBA
- CSS3: HSL & HSLA
Have you used Opacity somewhere on the web? Share it in the comments below!
So, does that bring us to the end of our little CSS 3 series? There are still a few declarations we haven’t covered and will be happy to continue on if they are called upon, such as: border-images, HSLA/RGBA colors, outline, resize and even speech. I’ve done my part so now, it is up to you… Let me know!
Subscribe to RSS or Email so you don’t miss the next article!
Thanks for reading,
Alex | Zen Elements
Hi,
You can also use ‘filter: alpha(opacity=70);’ to give opacity for IE, put that within an IE-only stylesheet within some IE conditional comments and you’ve got IE support too.
Your examples work in Safari 3.2.1 on OSX too.
Cheers,
Rick
if you change these lines:
# img.1 { opacity:0.25; width:150px; height:100px; }
# img.2 { opacity:0.50; width:150px; height:100px; }
# img.3 { opacity:0.75; width:150px; height:100px; }
to this:
# img.1 { filter:progid:DXImageTransform.Microsoft.alpha(opacity=25);opacity:0.25; width:150px; height:100px; }
# img.2 { filter:progid:DXImageTransform.Microsoft.alpha(opacity=50)opacity:0.50; width:150px; height:100px; }
# img.3 { filter:progid:DXImageTransform.Microsoft.alpha(opacity=70)opacity:0.75; width:150px; height:100px; }
it will generate the same results in IE7.
it may not be CSS, but it works ;)
@Rick & @SamBlak:
Thank you for the feedback and you are both quite right! =D
Your mentioned declarations do work in IE, to allow the different levels of opacity. It is also the declaration I used on my mentioned gallery a while back, although the example I linked to was still CSS generated opacity.
I wasn’t going to include the filter within the content for the purpose of the post but welcome them in comments and for others to see.
So thank you to you both.
Problem with using opacity though is that every child of that element will inherit the opacity and there is no way to turn it off. Ugh!
I love that you are doing this in short weekly installments. Great way for those interested to ease into all the new features.
Look forward to the rest.
@Davin:
It is unfotunate that way, Davin, you’re right however I think the best application of the opacity declaration is in styling images (such as gallerys) and backgrounds (such as navigation), as supposed to entire layers.
@Bill Biwer:
Thank you and I shall hope not to dissappoint! I’ve had a few requests to continue with some of the other declarations and will hopefully be tackling something continuing a little on the opacity front, RGBA.
Nice tutorial!
Added to my site.
how do i make outter box transparent and inner box not transparent using css without images
You could attempt to use RGBA or HSLA for the background of the individual boxes. I have just recently published two articles on RGBA and HSLA which should help but quickly:-
.outsideBox { background: rgba(68, 140, 79, 0.2); } or…
.outsideBox { background: hsla(202, 100%, 50%, 0.2); } and…
.insideBox { background: #ffffff; }
I hope this helps!
Alex
Keep working ,great job!
I have gone through the tutorials shown in page, But it is not supporting IE6 & 7. What should be done to support that for Internet Explorer Browser
@Mangesh | As mentioned in some comments herein, there are solutions to coding Opacity for IE6/7/8.
Some IE solutions by Rick Curran and SamBlak – thanks guys!
Setting an opacity in Firefox 3 slows down the site considerably. in fact if i remove the opacity the site works very smooth. i am using opacity as an overlay for entire page so user is unable to click anywhere while some processing is going on. Can u tell me where the problem lies with Firefox 3.