Come rendere trasparenti gli elementi con CSS3?

La gestione della trasparenza è stata sempre una delle operazioni più noiose del web design, dato che non c’era un modo effettivo di applicarla agli elementi di un sito se non tramite immagini preparate ad hoc (filtri proprietari esclusi). Le specifiche CSS3 ci vengono incontro con le dichiarazioni opacity e colore rgba che permettono di specificare quanto deve essere opaco un elemento. Vediamo come si utilizzano.

La dichiarazione opacity

La dichiarazione opacity accetta come argomento un numero intero senza unità di misura: un valore di 1 sta per “elemento completamente opaco” e un valore di 0 sta per “elemento completamente trasparente”. Ecco un primo esempio di utilizzo:

<div class="box-opacity">
    <h2>Gestione Opacità con <code>opacity</code></h2>
    <div class="opaco"></div>
    <div class="invisibile"></div>
    <div class="trasparente"></div>
</div>

 

.box-opacity div {
    background-color: red;
    height: 200px;
    outline: 1px solid black;
    width: 200px;
}

.box-opacity .opaco {
    opacity: 1;
}

.box-opacity .invisibile {
    opacity: 0;
}

.box-opacity .trasparente {
    opacity: 0.5;
}

In questo esempio l’elemento .opaco viene reso in rosso pieno, l’elemento trasparente viene reso al 50% trasparente e l’elemento .invisibile è effettivamente invisibile all’occhio umano (anche se occupa sempre spazio nel flusso della pagina, come si vede dall’esempio).

rgba

Come detto in precedenza, lo stesso effetto si può ottenere con la dichiarazione rgba, impostando in un sol colpo la il colore e la trasparenza.

<div class="box-rgba">
    <h2>Gestione Opacità con <code>rgba</code></h2>
    <div class="opaco"></div>
    <div class="invisibile"></div>
    <div class="trasparente"></div>
</div>

 

.box-rgba div {
    height: 200px;
    outline: 1px solid black;
    width: 200px;
}

.box-rgba .opaco {
    background-color: rgba(255, 0, 0, 1);
}

.box-rgba .invisibile {
    background-color: rgba(255, 0, 0, 0);
}

.box-rgba .trasparente {
    background-color: rgba(255, 0, 0, 0.5);
}

Qual è la differenza tra le due dichiarazioni?

A questo punto potrai chiederti quale sia la differenza tra i due approcci, e perché sono stati introdotti due metodi a prima vista simili per gestire la trasparenza degli elementi.

La differenza è che la regola opacity imposta il valore dell’opacità per l’elemento stesso e tutti quelli contenuti, mentre rgba viene applicata solo all’elemento selezionato. Puoi notare questa differenza nell’esempio: gli outline vengono resi trasparenti nel caso opacity mentre sono lasciati invariati nel caso rgba.

Possibili utilizzi?

Un ambito in cui spesso viene utilizzata la trasparenza è la realizzazione di didascalie trasparenti per slider di immagini.

<div class="slide">
    <img src="nutella.jpg">
    <p class="didascalia">La Nutella...</p>
</div>

 

.slide {
  position: relative;
}

p.didascalia {
  background-color: rgba(0, 0, 0, 0.4);
  color: #FFF;
  font: 2em/1.3 Helvetica, Arial, sans-serif;
  padding: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
}

In questo esempio il paragrafo contenente la didascalia ha un colore di sfondo nero, a cui viene applicata un’opacità del 40%. Se avessi usato opacity anche il testo sarebbe diventato trasparente.

In quest’altro esempio invece la trasparenza è stata utilizzata per far risaltare la differenza tra stato attivo e stato non attivo di un’immagine. Questo effetto prima doveva essere creato utilizzando più immagini (magari utilizzando una sprite) ed era un incubo da aggiornare (fare due copie di ogni immagine, per ogni variazione).

<img src="nando.jpg">
<img src="sara.jpg">
<img src="giustino-borzacchiello.jpg">
<img src="simone-damico.jpg">

 

img { opacity: 0.6; }

img:hover { opacity: 1; }

Qual è la compatibilità con i browser?

Il supporto sia per opacity che per rgba è abbastanza diffuso: IE 9+, Firefox, Chrome, Safari e Opera supportano entrambe le dichiarazioni. Anche nel mobile il supporto è buono.

Per quanto riguarda i browser più vecchi (IE 8 in primis), purtroppo ci si deve rifare ancora alle vecchie tecniche, però bisogna considerare caso per caso se ne vale la pena. Questi effetti CSS3 dovrebbero essere un ausilio all’usabilità del sito e non una parte necessaria, quindi si potrebbe anche decidere di fornire due esperienze diverse agli utenti con browser moderni e non.

Tag: , ,

L'autore

Appassionato di web design, si diletta a creare dei layout (X)HTML+CSS. È un maniaco del codice pulito e ordinato, il tipo di persona che vi ritrovate in casa a raddrizzarvi i quadri appesi alla parete. Ha deciso che diventerà un web designer con la “doppia vvu” maiuscola, e trascorre intere nottate sveglio per realizzare il suo sogno.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

  • Guida CSS3: i font – parte prima

    Bentrovato a questo nuovo appuntamento con la guida CSS3! Quest’oggi affronteremo un tema fondamentale: l’utilizzo di font, predefiniti e...

  • Guida CSS3: ereditarietà

    Bentrovato ad un nuovo appuntamento con la guida CSS3! Nel corso di questo articolo ci soffermeremo su un aspetto fondamentale che condiziona...

  • Selettore :not
    Guida CSS3: pseudo classi e pseudo elementi

    Bentrovato a questo nuovo articolo della guida CSS3! Come preannunciato nel capitolo precedente, quest’oggi ci occuperemo di pseudo classi e pseudo...

14 commenti

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo