(usehost) Hospedagem de Sites - Recife - PE (Hosting, E-mail Marketing, Comércio Eletrônico)

How is it done? Let’s take a gander at four different ways. Each of them handling the illusion in a different way, and each completely appropriate depending on the situation at hand.

Totally Friggin Fake It

From the Spectrum Theme website

The end result of any web design is basically an illusion anyway. You can always create your transparent effects in Photoshop or whatever other graphics editor and export flat graphics. In Photoshop, transparent effects can be created by changing a layers opacity level, fill level, or blending mode, just to name a few.

Opacity

This entire button has opacity applied to it, to emphasize that it is currently “disabled”.

You can make any element transparent by using the opacity parameter of CSS.

#anything {
  opacity: 0.5;  /* 50% transparent */
}

If you need to support older browsers, see here.

Do note that all descendants of the element with opacity also become transparent. There is no way to “force” any descendant to be come any less transparent as the parent is.

RGBa / HSLa

From the Like Architects site

Using RGBa for a color value in CSS, you can set a transparency level on any color. This has the distinct advantage over opacity in that it doesn’t have any affect on descendants. It is also nice in that creating faded out variations of a color is as easy as changing the final alpha value. Speaking of color variations, that is even easier to do with HSLa, and is still able to handle transparency.

#anything {
  background: rgba(0,0,0,0.5);  /* 50% transparent */
}

#anything {
  background: hsla(0,0,0,0.5);  /* 50% transparent */
}