CSS3 Opacity
CSS3 opacity allows the useful control of setting how see-through an element is and is great for backgrounds and creating :hover effects.
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.
CSS 3 Opacity (Example 1 : layers)
The above opacity example is set in another layer containing a textured background with each layer uses the following CSS
- CSS 3 Opacity (layers)
- div.L1 { background:#036; opacity:0.2; height:20px; }
- div.L2 { background:#036; opacity:0.4; height:20px; }
- div.L3 { background:#036; opacity:0.6; height:20px; }
- div.L4 { background:#036; opacity:0.8; height:20px; }
- div.L5 { background:#036; opacity:1.0; height:20px; }
An example for those on alternative browsers not seeing the different levels of opacity…
CSS 3 Opacity (Example 2 : images)
The above images are each set with their own opacity levelts using the following CSS
- CSS 3 Opacity (images)
- 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; }
An example for those on alternative browsers not seeing the different levels of opacity.
I used levels of opacity on my own website some years ago 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.
The Zen Elements CSS3 Series
- CSS3: Introduction
- CSS3: Border Image
- CSS3: Border Color
- CSS3: Border Radius
- CSS3: Box Shadow
- CSS3: Font Face
- CSS3: Gradients
- CSS3: HSL & HSLA
- CSS3: Multiple Column
- CSS3: Multiple Images
- CSS3: Opacity
- CSS3: RGB & RGBA
- CSS3: Text Shadow
- CSS3: Transform
Thank you for reading!
Alex | @ZenElements
�)
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.
i used it.
.outsideBox { background: rgba(68, 140, 79, 0.2); } or…
.outsideBox { background: hsla(202, 100%, 50%, 0.2); } and…
.insideBox { background: #ffffff; }
It works. Thanks…
This was a Great post, I will bookmark this in my Reddit account. Have a good evening.
Great post. Have literally just used this post along with another too create a cool looking comment box with opacity, rounded corners and a shadow. CSS3 rocks :)