Sono Andrea Tonin dello studio Luce Digitale di Rovigo, mi occupo per lavoro di web design per compagnie e marchi internazionali. Con questo corso gratuito vorrei introdurvi alla programmazione dei fogli di stili, detti CSS.
Il CSS3 ha introdotto una nuova specifica per assegnare i colori, la funzione rgba()
Vediamo una semplice struttura che incorpora la funzione rgba():
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
/* assegno immagine di sottofondo rgb */
.bgimg {
background-image: url(http://www.lucedigitale.com/blog/wp-content/uploads/2013/06/pattern_diagonali.png);
}
/* assegno un colore di sottofondo rgb completamente opaco al 100% */
.rgba1 {
background-color: rgba(255,0,0,1);
}
/* assegno un colore di sottofondo rgb opaco al 50% */
.rgba2 {
background-color: rgba(255,0,0,0.50);
}
/* assegno un colore di sottofondo rgb opaco al 25% */
.rgba3 {
background-color: rgba(255,0,0,0.25);
}
</style>
</head>
<body>
<div class="bgimg">
<div class="rgba1">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</div>
<div class="rgba2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</div>
<div class="rgba3">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</div>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
</body>
</html>
Il risultato del codice rappresentato è il seguente:
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Analizzando per esteso i parametri della funzione: rgba(valore del rosso,valore del verde,valore del blu,trasparenza alfa)
trasparenza alfa -> 1 -> Completamente opaco al 100%, solido
trasparenza alfa -> 0.5 -> Trasparente al 50%, I DECIMALI VANNO ESPRESSI CON IL PUNTO (.) NON CON LA VIRGOLA!
trasparenza alfa -> 0 -> Trasparente al 100% ed invisibile
La funzione viene renderizzata correttamente anche applicata al colore assegnato al testo come nell’esempio qui sotto:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
/* assegno immagine di sottofondo rgb */
.bgimg2 {
background-image: url(http://www.lucedigitale.com/blog/wp-content/uploads/2013/06/pattern_diagonali.png);
font-size: 20px;
}
/* assegno un colore al testo opaco al 100% */
.rgba12 {
color: rgba(255,0,0,1);
}
/* assegno un colore al testo opaco al 50% */
.rgba22 {
color: rgba(255,0,0,0.50);
}
/* assegno un colore al testo opaco al 25% */
.rgba32 {
color: rgba(255,0,0,0.25);
}
</style>
</head>
<body>
<div class="bgimg2">
<div class="rgba12">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</div>
<div class="rgba22">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</div>
<div class="rgba32">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</div>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
</body>
</html>
Per il risultato:
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
