Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Opacity and Transparent Colors
The ability to make colors and entire elements transparent in CSS3 is really cool, cutting down even more time otherwise spent making transparent PNGs in Photoshop or meddling with scripting, and it makes for some really awesome UI effects.
To make a single color transparent, you can add an alpha channel value as the fourth argument of an RGB or HSL color:
rgba(170,170,170,0.5); hsla(0,0%,67%,0.5);
You can make an entire element transparent by using the opacity property:
opacity: 0.5;
These properties have a huge number of uses, from making a nice textured design where the background shines through slightly, to making cool appearing and disappearing elements, along with transitions and animations. For example, suppose you replaced the gradient's solid hex colors with RGBa colors, like this:
background: -webkit-linear-gradient(to bottom right, rgba(170,170,170,0.3), rgba(68,68,68,0.3)); background: -moz-linear-gradient(to bottom right, rgba(170,170,170,0.3), rgba(68,68,68,0.3)); background: -ms-linear-gradient(to bottom right, rgba(170,170,170,0.3), rgba(68,68,68,0.3)); background: -o-linear-gradient(to bottom right, rgba(170,170,170,0.3), rgba(68,68,68,0.3)); background: linear-gradient(to bottom right, rgba(170,170,170,0.3), rgba(68,68,68,0.3));
And then delete the solid background color:
background-color: #aaa;
You would end up with a gradient effect that not only changes color, but also lets some of the background color and texture shine through, for an extra-nice effect. You could vary the entire look of different site pages by just varying the base background color (see Figure 10).
)
Figure 10 A background gradient, including semi-transparent RGBa colors, lets some of the background underneath our box shine through.