Cell. +39 3479684755
Il Blog di Instant Websites
La proprietà CSS3 border-radius
Tra le novità introdotte con i CSS3, vale a dire la nuova versione dei Cascading Style Sheet, merita una menzione la proprietà border-radius che consente di arrotondare i bordi di un box in base ad un determinato raggio.
Fino ad oggi, per ottenere l’effetto di arrotondamento era necessario creare i bordi tramite elementi grafici (tipicamente, gif trasparenti) ed applicare questi ultimi al box interessato come sfondo e/o come contenuto.
Un’ulteriore complicazione era data dal fatto che diventava spesso necessario creare dei div ad hoc proprio per applicare tali sfondi, rendendo più complesso – e semanticamente meno corretto – il mark-up.
Si trattava, in altre parole, di una procedura noiosa e contrastante con l’obiettivo di semplicità e stretta rilevanza semantica del codice ma inevitabile per ottenere l’effetto.
Tutte queste complicazioni sono oggi venute meno grazie alla proprietà border-radius che ha la seguente struttura:
#box {
…
border-radius: 10px;
}
dove il valore 10px si riferisce al raggio di ciascun angolo, nel caso specifico uguale su tutti e quattro gli angoli.
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%;
}
Layout a più colonne con la proprietà display: table-cell
La tecnica più impiegata per costruire un layout a due o più colonne utilizzando i CSS è sicuramente quella che si basa sulla proprietà float assegnata ai box che costituiscono le colonne.
Questa tecnica è anche definita metodo delle faux columns poiché, nel momento in cui le colonne devono avere colori di sfondo differenti, è sufficiente rendere flottante anche il box contenitore delle colonne ed assegnargli un’immagine di sfondo che, appunto, disegna le colonne rendendole in apparenza eguali in altezza.
In effetti, un box flottante risulta alto quanto basta a contenere il suo contenuto ma il box contenitore, essendo a sua volta flottante, conterrà entrambe le colonne per intero e la ripetizione sull’asse Y dell’immagine di sfondo garantisce che le colonne risultino – apparentemente – alte uguali: da qui, la denominazione di “finte colonne”.
Questa tecnica è consolidata da tempo e risulta compatibile con tutti i browser, recenti e meno recenti (attenzione ai bug di IE6 e precedenti ma questi browser sono considerati obsoleti e quindi non più supportati).
Una tecnica emergente è quella che si basa sulla dichiarazione display: table-cell applicata ai box che compongono le colonne.