Continua la rubrica mensile Proprietà CSS3, che permettono di colorare con leggerezza il vostro sito.

La proprietà CSS3 di oggi è: RGBA che assegna a un elemento un colore in formato rgb e un’opacità. Prima di questa proprietà si utilizzava la proprietà Opacity, che presentava però diverse carenze, che in seguito analizzerò.

Vediamo subito come si presenta:

Testo Opaco

La sintassi della proprietà RGBA:

color: rgba(quantità rosso, quantità verde, quantità blu, opacità);

RGBA

Ci sono diversi modi per rappresentare un colore; il più diffuso è quello della codifica esadecimale (#9966FF) o del nome inglese del colore (red). Un’altro pratica per rappresentare i colori è l’utilizzo della specifica rgb (0,100,255).

La proprietà CSS3 RGBA, dove A stà per Alpha, introduce un nuovo valore per determinare il grado di opacità del colore:
0 corrisponde al 0% di opacità, con 0.5 il 50% di opacità e via dicendo, fino a raggiunge il valore massimo, 1, cioè il 100% di opacità, quindi la trasparenza totale.

Esempio di base di una scritta con opacità al 40%:

Testo CSS3 RGBA con opacità 40%

color: rgba(100, 200, 0, 0.4);

Che differenza c’è tra RGBA e Opacity?

A questo punto nascono le prime domande:
La vecchia proprietà Opacity non era uguale, se non meglio, dato che aveva una sintassi più breve?

La sintassi della proprietà Opacity:

opacity: 0.7;

La risposta è semplice, opacizzando una scritta il risultato è lo stesso, utilizzando una o l’altra proprietà, ma cosa succede se applichiamo a un div la proprietà Opacity a differenza di RGBA:

Notate la differenza?

La proprietà RGBA applica la trasparenza solo all’elemento div, mentre Opacity applica la trasparenza a tutti gli elementi contenuti all’interno del div, provocando spiacevoli risultati.

A quali elementi posso attribuire la proprietà RGBA?

RGBA, può essere applicata a tutti gli elementi a cui può essere assegnata la proprietà color, background-color e border-color, quest’ultimo rappresenta la vera novità introdotta da RGBA, cioè la dissolvenza dei bordi di un box. Di seguito vedremo alcuni esempi.

Testo opaco

www.simonedesign.it

h1 {
    color: rgba(0,129,204,0.5);
}

<h1>www.simonedesign.it</h1>

Box con trasparenza

.sfondo {
    margin-bottom:10px;
    background: url(bg.png) #093172;
    padding:20px;
}
 
.box {
    padding:10px;
    background-color: rgba(0,129,204,0.5); 
}

<div class="sfondo">
    <div class="box">
        <h1>www.simonedesign.it</h1>
    </div>
</div>

Dissolvenza bordi

.box {
    width:300px;
    padding:10px;
    border: 20px solid rgba(0,129,204,0.5);
}

<div class="box">
    <h1>www.simonedesign.it</h1>
</div>