Attraverso la proprietà CSS3 box-shadow possiamo facilmente ottenere effetti creativi di sicuro impatto. Non è raro, ad esempio, imbattersi in pagine che presentano box con quell'effetto che gli inglesi chiamano page curl e che noi possiamo tradurre con 'arricciatura di pagina'. Visto che le immagini valgono più di mille parole, ecco uno screenshot:
Prima dell'avvento dei CSS3, per ottenere l'effetto era necessario affidarsi ad un'immagine con l'arricciatura da collocare come sfondo sulla parte bassa del box. È quanto avviene su diversi temi per la piattaforma Tumblr in cui si ricorre a questo espediente per garantire la massima compatibilità cross-browser, ovvero per rendere l'effetto anche su quei browser che non supportano le proprietà avanzate dei CSS3 (box-shadow in primis, ma non solo, come vedremo).
Grazie all'ingegno e agli sforzi collaborativi di diversi esperti, possiamo oggi ricreare il tutto senza ricorrere ad immagini, appoggiandoci unicamente ai CSS3. I dovuti crediti vanno dunque a Matt Hamm e soprattutto a Nicholas Gallagher, che su questa pagina ci offre un campionario unico e completo degli effetti che è possibile creare con un uso accorto delle ombreggiature CSS.
Per capire come funziona la tecnica possiamo partire dal nostro esempio.
L'effetto 'arricciatura' è stato applicato al primo box, un div con classe .curl. Analizziamo il codice CSS:
.curl {
width: 400px;
margin: 40px auto;
padding: 10px;
background: #fff;
position:relative;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}In prima istanza lavoriamo sul div, assegnando una larghezza (width), margini e padding a piacere.
Il valore per background andrà scelto con cura, valutando il modo in cui si combina con il colore di sfondo della pagina e con quello dell'ombra per ottenere un effetto realistico e gradevole. Nel nostro caso abbiamo optato per un bianco che ben contrasta con il grigio della pagina.
Veniamo ora alle regole cruciali per l'effetto page curl. Prima di tutto dobbiamo impostare per il box position: relative. Di qui a poco, infatti, useremo il posizionamento assoluto del contenuto generato, per cui l'elemento di riferimento va posizionato relativamente.
Per concludere aggiungiamo un'ombreggiatura con box-shadow. La sintassi è quella che consente di assegnare ad un elemento ombre multiple (due nello specifico) separate dalla virgola. Per il colore dell'ombra è stata usata una notazione RGBa che dà come risultato una tonalità di grigio. È fondamentale anche notare che una delle due ombreggiature va accompagnata dalla parola chiave inset, grazie alla quale creiamo un'ombra che si colloca all'interno dell'elemento e che si aggiunge a quella standard (senza keyword) che è proiettata verso l'esterno.
Si potrebbe intervenire sui valori per modificare a piacimento l'estensione dell'ombra, ma per l'effetto che vogliamo qui ottenere è consigliabile non farlo.
A questo punto ci ritroviamo un div con box-shadow del tutto normale. Per creare l'effetto non basta. Entra in gioco il contenuto generato:
.curl:before, .curl:after {
content: " ";
background: transparent;
-webkit-transform: skew(-5deg) rotate(-5deg);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.3);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
position: absolute;
left: 8px;
bottom: 12px;
width: 70%;
height: 50px;
z-index: -1;
}
.curl:after {
left: auto;
right: 8px;
-webkit-transform: skew(5deg) rotate(5deg);
-moz-transform: skew(5deg) rotate(5deg);
-ms-transform: skew(5deg) rotate(5deg);
-o-transform: skew(5deg) rotate(5deg);
transform: skew(5deg) rotate(5deg);
}Il funzionamento di base è quello già visto in precedente articolo:
- si definiscono gli pseudo-elementi
:beforee:afterper il div; - si setta un contenuto vuoto (
content: " ";; - si usano le trasformazioni CSS3 (distorsione/skew e rotazione/rotate) per creare una forma che darà poi origine agli angoli sollevati;
- si aggiunge un'ulteriore ombreggiatura;
- si imposta il posizionamento assoluto definendo le coordinate giuste (con
left,bottome poi, sotto, conlefteright; - si assegna una larghezza in percentuale e un'altezza in pixel;
- si definisce lo
z-indexdel contenuto così generato con un valore negativo perché appaia sotto al div.
Per chiarire il procedimento, ecco uno screenshot del box in cui la forma creata come contenuto generato è stata posizionata molto in basso:
Per posizionare tale forma nel punto corretto e ottenere l'effetto dobbiamo impostare nel modo corretto questi valori:
topleftright- il secondo
leftva lasciato suauto widthheight
Dunque, se provate a creare su un vostro progetto l'arricciatura usando i valori dell'esempio e non riuscite a ottenere lo stesso esito, sapete dove intervenire.
Il codice CSS, ricordiamolo, appare un po' verboso perché proprietà come box-shadow e transform è necessario definirle usando la sintassi specifica per i vari browser.
L'effetto rende perfettamente sulle versioni più recenti di tutti i browser. Su IE8 e IE7 il tutto degrada senza particolari problemi, anche se gli utenti non vedranno l'effetto page curl.
Altri effetti creativi
La pagina di Nicholas Gallagher, come si accennava, contiene altri effetti basati sull'ombreggiatura. Potete spulciare il codice sorgente per comprenderne il funzionamento, ma per comodità abbiamo raggruppato alcuni di essi nel nostro esempio fornendo una vista più efficace del codice CSS.
Nel secondo esempio abbiamo poi applicato gli effetti nel contesto di un layout completo. Il codice e gli esempi sono disponibili per il download.
