Ed eccoci tornati come promesso con la seconda puntata di questa serie che ha come scopo quello di introdurvi a tutte le novità della terza versione dei Fogli di Stile a Cascata .
Argomento di oggi saranno i colori… E si ci sono delle novità anche in questo; più precisamente parleremo di nuovi metodi di selezione dei color e di altre piccole novità generali.

La scala rgba()

Iniziamo parlando proprio di questa scala che risulta essere l’evoluzione della classica scala di misurazione dei colori rgb().
Faccio una piccola introduzione, innanzitutto alla scala rgb() perché molti essendo abituati ad usare, come metodo di selezione dei colori, il metodo esadecimale (per intenderci quello dove si scrive “#” e poi una serie di cifre che altro non sono che un numero in scala esadecimale che identifica univocamente il colore scelto) sconoscono l’esistenza del metodo alternativo che è quello RGB.
Inizio chiarendovi che RGB sta per Red-Green-Blue e quindi come è facile intuire il metodo di selezione si basa sulla quantità di questi tre colori che va poi scritta nel css in questo modo

rgb(r,g,b)

dove r,g e b sono rispettivamente la quantità dei tre colori che va espressa con un numero compreso fra 0 e 255.
Piccolo cosa che voglio farvi notare è che questa scala è in un certo senso anche più logica rispetto a quella esadecimale, infatti ad esempio il nero che è assenza di colore va scritto così rgb(0,0,0); mentre ovviamente il bianco, che come Newton ci insegna contiene in se tutti i colori, avrà il valore che segue rgb(255,255,255).

E adesso ovviamente vi chiederete “ma come faccio a sapere i valori RGB di tutti gli altri sedici milioni di colori altri colori ?!?” Beh in realtà è molto semplice e sono sicuro che molti buoni osservatori già avranno notato che quello che sto per dirvi

Se guardate all’immagine qui sotto, che altro non è che uno screen del color picker (strumento di selezione dei colori) di Photoshop noterete che ho evidenziato i tre valori che ci interessano

Quindi se volessimo scrivere il colore qui sopra in RGB lo scriveremmo così

rgb(45,85,178)

Se credete che ho finito vi sbagliate di grosso, ancora di CSS 3 non abbiamo neanche iniziate a parlare… Vi ricordate che all’inizio dell’articolo ho menzionato rgba() e non rgb(). La novità in effetti è proprio quella “a” che sta per alpha (“opacità“).
Infatti possiamo utilizzarla per conferire una determinata opacità al colore che quindi lascerà trasparire gli elementi sullo sfondo. Ritengo che questa funzionalità sia molto utile per creare menu a discesa e vari effetti 2.0 senza dovere necessariamente ricorrere a Photoshop o ad altri programmi di grafica.
Adesso vi riporto un piccolo esempio nel quale conferisco un’opacità del 40% al colore di sfondo (nero) di un div

#div
{
background-color: rgba(0,0,0, .4) /* .4 è il valore dell'opacità al 40% */
}

come potete vedere nell’immagine qua sotto il div nero lascia vedere l’ipotetico sfondo sottostante ad esso creando un effetto molto carino…

Se invece volete assegnare un opacità “completa” (che comprenda anche la scritta) vi basta utilizzare un’altra novità del CCS 3 ovvero l’opacity

#div

{

background-color: rgb(0,0,0);

opacity: 0.4;

} 

In questo caso la trasparenza sarà estesa anche alla scritta e a tutto quello che si trova dentro il div in questione…

Sperando che questo post vi sia piaciuto ci risentiamo la prossima settimana con altre novità!