CSS

Transparency using CSS3

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;
}
Back to top

Gain access to all tutorials

  • Premium tutorials covering WordPress, Laravel and VueJS
  • Download premium content
  • Download premium WordPress plugins
  • Only $5 a month

Join Paulund