Opacità con rgba

In questo articolo vedremo come creare un’opacità con rgba.

Abbiamo già visto, nella lezione precedente, come utilizzare opacity. Abbiamo anche notato che l’effetto opacità, oltre allo sfondo, viene applicato anche al testo contenuto in un elemento che ha un’opacity.

Quindi vediamo come evitare questo effetto, qualora non si voglia applicare, con l’utilizzo di rgba.

Opacità con rgba – primo esempio

Nella pagina html inseriamo solo un elemento div con del testo, a cui assegniamo una classe, ad esempio, di nome opaco.

Quindi nella pagina html scriviamo semplicemente questo codice:

<div class="opaco">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!
</div>

Dopo, nel css, creiamo un effetto opacità con rgba.

Innanzitutto impostiamo alla classe opaco un colore di sfondo rgba. In questo modo utilizziamo il canale alpha per la trasparenza. Dunque lo impostiamo inizialmente a 0.5.

Poi, quando passiamo con il mouse sopra il box, portiamo il canale alpha ad 1, in modo da togliere completamente la trasparenza. Assegniamo dunque quest’ultimo valore alla classe hover.

Di seguito il codice CSS per l’effetto opacità con rgba:

.opaco {
     background-color: rgba(0, 140, 213, 0.5);
     width: 200px;
     height: 200px;
}
.opaco:hover {
    background-color: rgba(0, 140, 213, 1);
}

Ecco dunque come apparirà il nostro esempio:

Come possiamo notare l’effetto opacità viene applicato solo allo sfondo e non al testo.

Opacità con rgba – secondo esempio

In questo secondo esempio vedremo i diversi effetti sui livelli del canale alpha.

Quindi nella pagina html inseriamo 3 elementi con del testo riempitivo:

    <div class="box opaco-zero-uno">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!
    </div>
    <div class="box opaco-zero-cinque ">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!
    </div>
    <div class="box opaco-uno">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!
    </div>

Nel css inseriamo poi le regole per il canale alpha:

.box {
  width: 200px;
  height: 200px;
}

.opaco-zero-uno {
  background-color: rgba(8, 67, 255, 0.1)
}

.opaco-zero-cinque {
  background-color: rgba(8, 67, 255, 0.5)
}

.opaco-uno {
  background-color: rgba(8, 67, 255, 1)
}

Sotto possiamo visionare l’esempio completo:

In questa lezione abbiamo visto come applicare un effetto opacità con rgba, utilizzando cioè il canale alpha, nelle prossime lezioni proporrò altri esempi.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive