Home ยป CSS

CSS opacity

Submitted by Piotr Rochala on Tue, 11/10/2009 - 21:48

Opacity is a really cool and very easy to achieve effect in CSS. In this article I will describe how to set opacity of any HTML element using smart but not standard for CSS 2.1 property.

Code below shows how to correctly set opacity of any HTML element:

Preview Code
Opacity Example 
#myOpacityImage { 
  opacity:.5; 
  filter: alpha(opacity = 50);
}

In this example, the opacity property sets 50% opacity of the image on all browsers up-to-date with CSS 3.0 standards.

Filter is a IE-specific thing and it handles support for this effect on Internet Explorer browsers.

And this is another example, this time 80% transparency has been applied to div element:

Preview
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at enim quis eros volutpat porttitor. Donec consequat diam enim, non condimentum nibh. In metus nisi, dignissim cursus volutpat et, accumsan vitae lorem. Sed venenatis tellus augue, et vehicula turpis. Donec et viverra metus.

And that's it, job done!

Did you like my article? Share it!
Share/Bookmark

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <csharp>, <css>, <html>, <javascript>, <vb>, <vbnet>, <xml>. Beside the tag style "<foo>" it is also possible to use "[foo]".

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters (without spaces) shown in the image.
served by y.co.uk