Trasparenze con CSS
Warning: Undefined array key "juiz_sps_order" in /membri/saitfainder/wp-content/plugins/juiz-social-post-sharer/inc/front/buttons.php on line 302
Inserire dei contenitori trasparenti può rendere molto più bello un layout. Purtroppo non tutti i browser offrono gli stessi strumenti. Vediamo come fare.Il modo classico per rendere trasparente un contenitore è quello di sfruttare l’attributo OPACITY dei CSS. E’ un attributo che viene ormai supportato da tutti i browser recenti (escluso Konqueror 3.5). In realtà per MSIE occorre usare l’attributo proprietario FILTER. Il codice da usare è molto semplice. Faccio l’esempio su un div:
div#trasparente {
opacity: 0.7; /* STANDARD */
filter: alpha(opacity=70); /* MSIE */
}
Da notare che OPACITY prende un valore tra 0 (completamente trasparente) ad 1 (completamente opaco). MSIE utilizza invece un intervallo di valori da 0 (completamente trasparente) a 100 (completamente opaco).
Un inconveniente di questo metodo risiede nel fatto che OPACITY rende trasparente tutto il contenuto del box: sfondo, bordo, testo, altri box eventualmente contenuti. Esistono diverse soluzioni per questo problema:
Usare una PNG o una GIF retinata
Questa soluzione è sicuramente la peggiore, ma funziona su tutti i browser. Consiste nel creare una PNG o una GIF con un disegno a scacchiera. Quindi ci renderanno metà pixel opachi e metà trasparenti, una retinatura appunto. Non è bellissimo da vedere, ma funziona. Attenzione alla PNG che deve avere i colori indicizzati e quindi non deve essere una true color a 24 bit.
Usare una PNG con canale ALPHA
Poiché il formato PNG permette la definizione in un canale alpha, e quindi di stabilire le trasparenze delle regioni dell’immagine, è possibile sfruttarlo per ottenere uno sfondo trasparente. Purtroppo le versioni precedenti a Explorer 7 visualizzeranno uno sfondo opaco. Probabilmente al momento è questa la soluzione migliore.
Usare un doppio box
Un’altra soluzione è quella di usare due box sovrapposti. Quello inferiore sarà vuoto servirà solo per lo sfondo, quello superiore sarà dedicato ai contenuti. La difficoltà di questo sistema sta nel fatto che le dimensioni dei due box dovranno corrispondere (con un pò di Javascript si riesce). Attenzione che i box dovranno essere inseriti in un ulteriore box contenitore e non essere annidati uno dentro l’altro.
Usare l’attributa RGBA
La soluzione definitiva arriva dai CSS3 e si chiama RGBA. In pratica si tratta di un attributo che definisce la classica tripletta RGB con in più il grado di opacità.
div#trasparente {
background-color: rgba(255, 0, 0, 0.7)
}
Semplice e pulito. Al momento però è supportato solo da Firefox, Safari e Chrome. Il futuro Opera 10 sarà anch’esso in grado di gestirlo correttamente. Come al solito MSIE è rimasto indietro e anche nella versione 8 questa feature non è disponibile.
La cosa divertente è che possono essere definiti come RGBA anche solo i bordi, o solo il testo. Proprio quello che ci voleva!
Alla prossima
files/files/
Commenta