Opacità con rgba — CodingCreativo

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.

Da zero ad eroe

Entra nel mondo della programmazione web: variabili, funzioni, array, DOM, eventi. Con esercizi pratici e progetti coinvolgenti.

8 ore di corso registrato
Più di 50 algoritmi risolti passo passo
Livello base — da zero ad eroe
100% online, fruibile quando vuoi

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:

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!

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.

Lezione precedente: proprietà opacity CSS

Lezione successiva: proprietà border CSS