Cell. +39 3479684755
Il Blog di Instant Websites
La funzione rgba per gestire il canale alfa nella definizione del colore di sfondo
Una delle tante novità introdotte con i CSS3 è quella relativa alla funzione rgba per definire il colore di sfondo di un elemento; oltre ai 3 canali Red, Green e Blue in pratica viene gestito un quarto canale e cioè alfa.
Il valore di alfa va da 0.0 (completamente trasparente) a 1.0 (completamente opaco) e consente quindi introdurre la trasparenza negli sfondi stessi.
La notazione sarà del tipo:
#elemento {
background-color: rgba(255,128,150,0.8);
…
}
utilizzando quindi i 256 possibili valori di ciascun canale e specificando infine la trasparenza.
Potete vedere un esempio molto semplificato in questa pagina dove le proprietà CSS sono state così definite:
body {
margin: 0;
padding: 20px;
background-color: #FFF;
}
#contenitore {
width: 600px;
height: 450px;
background-color: rgb(0,0,0); /* dichiarazione di sicurezza */
background-color: rgba(0,0,0,0.6); /* dichiarazione per i browser che supportano CSS3 */
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFF;
padding: 7px 14px;
line-height: 120%;
}
Migliorare l’aspetto dei collegamenti ipertestuali con CSS3
La formattazione dei collegamenti ipertestuali (hyperlinks) tramite CSS prevede, come noto, la definizione delle proprietà delle differenti pseudoclassi dinamiche.
Queste vengono normalmente distinte in due gruppi: il primo corrispondente al link “a riposo”, cioè non attivato ed il secondo corrispondente al link attivato con uno dei vari dispositivi di puntamento possibili, con la seguente sintassi nel foglio di stile:
a {
// qui le proprietà comuni a tutte le pseudoclassi dinamiche
…
}
a:link, a:visited {
// qui le proprietà dei link a riposo, già visitati o meno
…
}
a:hover, a:focus, a:active {
// qui le proprietà dei link attivati tramite un dispositivo di puntamento
…
}
(si rammenti che l’ordine in cui le pseudoclassi vengono definite è tassativo in base alle raccomandazioni del W3C).
Di solito i link visitati vengono formattati nello stesso modo di quelli non ancora visitati, tuttavia in casi particolari è possibile assegnare loro proprietà particolari: ad esempio, in un elenco con un numero molto elevato di collegamenti, si potrebbe volere agevolare il visitatore segnalando visivamente quali di questi sono già stati visitati.
Tramite i CSS è quindi possibile variare colore del testo, colore di sfondo, sottolineatura o meno ed altre proprietà, tenendo conto che le regole di fruibilità del sito sconsigliano l’evidenziazione dei links tramite il solo colore differente da quello del testo ordinario, soprattutto quando tali links si trovano nel corpo del testo e non isolati in un menu a parte.
I CSS3 hanno introdotto alcune proprietà che permettono di migliorare l’aspetto dei collegamenti ipertestuali con effetti semplici e gradevoli che, fino ad oggi, richiedevano l’utilizzo di Javascript.
Vediamone un paio che impiegano la proprietà transition.
Immagine di sfondo al 100% con CSS3 e con CSS2
Si pone talvolta l’esigenza di impostare una singola immagine di sfondo alla pagina del nostro sito, che presenti le seguenti caratteristiche:
1) deve ridimensionarsi in relazione alla viewport (dimensione, o meglio risoluzione dello schermo dell’utente),
2) non deve deformarsi in seguito a quanto sopra, vale a dire le proporzioni devono restare immutate.
Sembra facile ma, come sanno bene gli sviluppatori, non lo è anche se la nuova versione dei Cascading Style Sheet facilita di molto la vita.
Vediamo dunque come procedere:
CSS3
E’ stata introdotta la nuova proprietà background-size, impostandone il valore su contain o cover è possibile ottenere l’effetto desiderato.
Il codice CSS sarà dunque:
body {
margin: 0;
padding: 0;
background: url(immagini/index.jpg) no-repeat center center fixed;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
}
Usando contain, l’immagine non viene deformata ma può lasciare degli spazi bianchi sul lato lungo dello schermo; usando cover, invece, l’immagine riempie interamente lo schermo ma può deformarsi.
Il limite è rappresentato dal fatto che solo i browser più recenti supportano la proprietà in questione.
Pur adottando la sintassi differenziata vista sopra (pur specificando cioè mozilla o webkit quali “motori” del browser), resta il problema di Internet Explorer che supporta background-size solo dalla versione 9; come è noto, chi ha un PC che gira sotto Windows XP non può avere una versione superiore alla 8 quindi si tratta di un problema serio che richiede una soluzione alternativa.