Ok, a differenza di alcuni mesi fa, ora i tempi sono maturi per iniziare ad esplorare le novità introdotte da CSS3 e, giusto per rompere il ghiaccio, inizieremo dalle istruzioni che maggiormente si stanno diffondendo: quelle che riguardano colori, testi, ombre e bordi.
In realtà CSS3 introduce una miriade di novità, che vi illustrerò di volta in volta in articoli successivi a questo: una delle mie preferite sono le transition che, vi assicuro, riescono spesso a sostituire alla grande jQuery per animazioni, rotazioni, ecc.
Ma torniamo alle prime novità di CSS3: eh sì, per la gioia di tutti i web designer che sinora avevano solo Photoshop come alleato per applicare ombre a testi ed oggetti o realizzare bordi arrotondati, ora possiamo fare tutto con CSS3 🙂 …ma so già cosa state per chiedervi: quali browser supporteranno quanto stiamo per vedere ?
A questa domanda risponderò dopo ma vi anticipo che, a meno di voler estendere la compatibilità ad IE 6 (che è un po’ come cercare di resuscitare i morti :D), tutti gli altri browser se la cavano egregiamente, magari con alcuni accrocchi come Modernizr.
Modificatore rgba
Ma torniamo a noi: partiamo con un nuovo modificatore che riguarda, in generale, la definizione del colore per un qualunque oggetto.
Guardate le seguenti istruzioni:
background: rgba(255,255,255,0.75);
border: 1px solid rgba(255,255,255,1);
Notate qualcosa di diverso rispetto al solito ?
Rispetto alla precedente codifica (esadecimale) dei colori (#ffffff), in questo caso abbiamo utilizzato un formato basato sui valori di luminosità delle tre componenti di colore RGB in una scala da 0 a 255.
L’ultimo valore, invece, rappresenta il coefficiente “alpha” relativo all’opacità che va da 0 (trasparente) a 1 (colore pieno).
Come vedete, il modificatore rgba può essere usato in qualsiasi dichiarazione di un colore che prima era riservato al solo formato esadecimale (la seconda riga dell’esempio, infatti, lo applica al colore del bordo).
Ombra dei testi
Questa è una nuova direttiva che riesce a dare maggior risalto ai testi, ad esempio, per conferire un minimo di profondità o aggiungere ombre evidenti ad un testo.
L’istruzione è, appunto, text-shadow, vediamola in azione:
text-shadow: 0px 1px 2px #000;
Vi spiego i valori utilizzati:
- il primo valore (in questo caso 0px) rappresenta l’offset orizzontale dell’ombra rispetto al testo: valori positivi indicano uno spostamento a destra del testo, valori negativi a sinistra.
- il secondo valore, invece, rappresenta l’offset verticale (in questo caso 1 pixel)….anche qui: valori positivi per offset in basso rispetto al testo, valori negativi in alto rispetto al testo.
- il terso valore è il “radius”, il raggio dell’ombra: è mio modesto parere che le famose “drop shadow”, quelle ombre enooooormi sotto al testo, siano ormai old-style 🙂 …io adoro utilizzare valori molto bassi per conferire tridimensionalità ai testi senza eccessi 😉
- l’ultimo valore è chiaramente il colore dell’ombra, in questo caso espresso in valori esadecimali con 8bit per colore (ma avrei potuto utilizzare rgba tranquillamente ;))
Bordi arrotondati
Questa istruzione, devo dire, porta i segni della costante guerra tra i browser e, di fatto, richiede 4 istruzioni per fare praticamente la stessa cosa, ma per 4 tipologie di browser differenti.
Se volessimo arrotondare, ad esempio, di 10pixel un oggetto qualsiasi, dovremmo scrivere:
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Le prime tre istruzioni sono specifiche per alcuni browser, l’ultima è quella che “si spera” diventi lo standard…ma per il momento sono richieste tutte e 4.
In questo esempio, però, ci siamo tenuti sul caso semplice: stesso raggio per tutti i 4 bordi dell’oggetto in questione.
Se volessimo, ad esempio, definire raggi differenti per i 4 angoli di un oggetto, avremmo:
border-radius: 5px 10px 15px 20px;
dove i valori sono, nell’ordine: top-left, top-right, bottom-right, bottom-left.
Quindi, in questo caso, avrò applicato un raggio di:
5pixel in alto a sinistra
10pixel in alto a destra
15pixel in basso a destra
20pixel in basso a sinistra
Ombra degli oggetti
Analogamente a quanto abbiamo visto per i testi, è possibile applicare un’ombra anche agli oggetti – il concetto è lo stesso applicato ai testi, con le quattro istruzioni specifiche per i singoli browser:
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-khtml-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
In questo esempio sto applicando un’ombra:
- di colore nero con opacità al 50%
- sfasata verticalmente di 1pixel
- di un raggio di 3pixel
Modernizr, e browser supportati
Ok, tutto bellissimo: ma ora che me ne faccio di queste istruzioni se i browser più diffusi non le supportano ? …e qui entra in gioco Modernizr una libreria Javascript che estende il supporto ad HTML 5 e CSS3 a browser poco avvezzi alle novità.
Basterà infatti includere lo script di Modernizr nelle nostre pagine per applicare bordi ed ombre:
<script src=”modernizr-1.1.min.js”></script>
Discorso a parte, invece, per il modificatore rgba: purtroppo per questo non c’è Modernizr che tenga e, a costo di rinunciare all’alpha, possiamo utilizzare rgb per IE, ecco un esempio:
border: 5px solid rgb(255,255,255); /*rgba fix per IE */
border: 5px solid rgba(255,255,255,0.75);
Pixel ? ma ora non conviene usare i punti ?
Eh già, negli esempi appena riportati ho usato pixel come unità di misura per i bordi…in realtà, mentre vi scrivo, è in corso una evoluzione nei display di alcuni dispositivi, ad esempio un certo Retina Display di iPhone 4…non so se avete presente ?! un display con densità di pixel doppia rispetto al numero di punti.
Pertanto, sarà buona norma utilizzare i punti (pt) al posto dei pixel (px), ma per i dettagli vi rimando all’articolo in questione 😉
ciaooo 🙂
Leave a comment