Un box trasparente con i CSS
In questo Articolo vediamo come applicare un'immagine o un colore di sfondo ad un box e renderlo trasparente in modo da vedere gli elementi sottostanti.
Si tratta di un espediente molto utilizzato per la stilizzazione di menu dinamici e per box contestuali, secondo la moda lanciata dalla grafica di Windows XP, infatti è un effetto molto presente sul sito della Microsoft stessa.
Facciamo un esempio molto semplice ed anche piuttosto inusuale, al solo scopo di rendere meglio l'idea su cosa stiamo tentando di fare; di seguito un'immagine di esempio:
Iniziamo a creare un elemento che faccia da contenuto della pagina
<div> In questo Articolo vediamo come applicare<br> un'immagine o un colore di sfondo ad un box<br> e renderlo trasparente in modo da vedere<br> gli elementi sottostanti. </div>creiamo adesso il <div> che farà da box con sfondo trasparente
<div id="BOX"></div>Stilizziamo genericamente l'elemento <div>
div { font: Normal 10px Verdana; }
Siamo giunti alla fase clou del gioco, ovvero la stilizzazione del box. Vediamo il codice completo
#BOX
{
filter: alpha(opacity=80);
position: Absolute;
top: 25px;
left: 25px;
background-color: #EEEEEE;
width: 130px;
height: 50px;
padding: 5px;
border: Solid 1px #CCCCCC;
}
In grassetto ho evidenziato la riga che rende possibile l'effetto trasparenza. I valori che può assumere vanno da 0 a 100, dove 0 significa nascondere completamente l'elemento, rendendolo trasparente al massimo; 100 vuol dire nascondere l'effetto trasparenza, non lasciando per nulla intravedere gli elementi sottostanti.
Il resto del codice è tanto necessario quanto opzionale, nel senso che bisogna sovrapporre gli elementi allo scopo di ottenere l'effetto trasparenza e visualizzare quello che c'è sotto; è necessario impostare un colore di sfondo per lo stesso motivo di prima. Bordi, padding, colori, dimensioni li lascio la gusto ed alle esigenze del lettore.
Ovviamente è possibile rendere trasparente anche un'immagine di sfondo, semplicemente sostituendo la riga
background-color: #EEEEEE;con
background-image: url(sfondo.gif);Enjoy!
