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.
