CSS  »  Articoli  »  CSS Template e layout 

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:

Figura 1 - Un box con effetto page curl

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).

Figura 2 - Dettaglio del tema per Tumblr 'Surreal'

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.

Altri articoli

Altre guide

Altre newsletter