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.

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
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:

12 commenti

  1. Danilo

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo

Lascia un Commento

Current day month ye@r *