- In Evidence
- 26 May 2011
- CSS/HTML
- 0 Comments
-
Tags: css3, opacity -
-
Tweet
CSS3 Pills : Transparency
26 May 2011 Posted By Lorenzo Lagana'
CSS3 Introduced a new standard which allow designer to give opacity to any kind of element of your website structure.
Using a few lines of code is possible to see opacity natively for Chrome, Safari Firefox and Opera.With the support of hacks are also supported IE, from 5 to 8.
Let’s start from the basic code.Assume to have an img inside a div named “container”.
Opacity for : Chrome, Safari Firefox and Opera
#container img{ opacity:0.25;}
Opacity for IE5-IE7
#container img{
filter: alpha(opacity = 25) /*for Browsers IE5-7 */
}
Opacity for IE8
#container img{
-ms-filter: "progid:DXImageTransform.Microsof.Alpha(Opacity=25)"; /* For Browser IE8 */
}
The final Code
#container img{
#container img{ opacity:0.25;} /*for Browsers Chrome, Safari Firefox and Opera */
filter: alpha(opacity = 25) /*for Browsers IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsof.Alpha(Opacity=25)"; /* For Browser IE8 */
}
