Transparency using CSS3

in CSS

What?

Using a new feature with CSS you can set a transparency to any element on the your website. This can be a div or a paragraph, which can be useful to use when you have a text with a background color overlaying an image.

You can change the transparency level to any level from completely see-through to just a very light transparency

Why?

Before this technique the only way to add transparency was to have a background image on the object which has transparency. But this added an extra object for the DOM to load on the page therefore increasing load times. So using CSS will be a better way of handling transparency on your website.

How?

To add transparency in your CSS all you have to do is add a opacity option to object with a value of 0 to 1.

1 being solid color and 0 being completely transparent.

But with different browsers there are different opacity settings.

For FireFox use: -moz-opacity: 0.5; For IE use: filter: alpha(opacity=50); For others use: opacity:0.5;

.transparency{
     filter: alpha(opacity=50);
     -moz-opacity: 0.5;
     opacity:0.5;
}

Subscribe To Newsletter

Get weekly updates to your email