Wednesday, 11 December 2013

Wednesday, December 11, 2013
Setting the CSS Transparency for All Browsers is really simple and easy. But lets first understand the CSS Transparency a little better first. CSS Transparency has a lot of history and id does need a lot of  different properties to be set and also a lot of values to be set. The main reason for this is to ensure  cross browser compatibility is achieved.   

Now there are numerous ways you can add the CSS Transparency settings but I am only going to show a few and much used versions. I know a lot people use different versions of code for this purpose, but for beginners these code are perfect to use. You can use any one of the code below.

This is the simple piece of code that you need to add transparency
.transparent {
 zoom: 1;
 filter: alpha(opacity=50);
 opacity: 0.5;
}
Another method that you can use although you might think that this uses more lines of code but this is necessary as you will be coding in to make sure that cross browser compatibility is ensured. (*Not used generally any more). This is presently set to 50% transparency.

.transparent {
 /* This is needed for IE 5, 6, 7 */
 /* ...or something to trigger hasLayout, like zoom: 1; */
 width: 100%; 
  
 /* Theoretically for IE 8 & 9 (more valid) */ 
 /* ...but not required as filter works too */
 /* should come BEFORE filter */
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 
 /* This works in IE 8 & 9 too */
 /* ... but also 5, 6, 7 */
 filter: alpha(opacity=50);
 
 /* Older than Firefox 0.9 */
 -moz-opacity:0.5;
 
 /* Safari 1.x (pre WebKit!) */
 -khtml-opacity: 0.5;
    
 /* Modern!
 /* Firefox 0.9+, Safari 2?, Chrome any?
 /* Opera 9+, IE 9+ */
 opacity: 0.5;
}
If you are using something else and want to share with us then please post it in the comment section. If you like this then please share is along.

0 comments:

Post a Comment