CSS: transparencia

El CSS (Cascade Style Sheet [Fulles d'estil]) té moltes possibilitats. Quan comences a fer pàgines web resulta realment pràctic i impressindible utilitzar fulles d'estil. Aquestes et permeten estructurar el contingut de la web de manera precisa i en tot el conjunt del site. Si decideixes canviar el color de lletra simplement ho canvies a la fulla d'estil, i no has de canviar pàgina per paàgina (o paragraf per paràgraf).

Avui remarco les propietats per fer transparent una capa (o secció) de la nostra web.

Degut a l'existència de diferents navegadors i de la manca d'acords i estandarització existeixen diferents maneres segons el navegador:

• A l'estandard CSS3 existeix la propietat opacity que pren valors entre 0 (invisible) i 1 (opac).
• Mozilla té la seva propia propietat anomenada -moz-opacity que pren els mateixos valors que la de l'estandard CSS3. No obstant Mozilla compleix l'estandard CSS3 així que es pot usar la propietat opacity sense problemes.
• Per ultim Internet Explorer utilitza la propietat filter opacity amb valors entre 0 i 100 de la seguent manera: filter: alpha(opacity=50);

Així que podem definir l'estil seguent:

<style type=”text/css”>

.fonsVermell { background-color:red; widht:100%;}

.fonsTransparent{

background-color:red;

widht:100%;

filter: alpha(opacity:50); /* IE */

opacity: .5; /* CSS3 */

}

</style>

I el resultat d'aquestes dues classes és el següent.

Fons opac

Fons Transparent

He aplicat les classes .fonsVermell i .fonsTransparent a dues capes diferents marcades amb l'etiqueta <div></div>. Podem veure que tota la capa es torna transparent (al 50%), tant fons com lletra.

Aquesta propieta pot donar molt joc per a fer diferents efectes.