Effetto ombra coi CSS
Insieme a border-radius, l'introduzione della proprietà box-shadow rappresenta una delle principali novità di CSS3 dal punto di vista degli effetti grafici. Grazie a questa proprietà, infatti, i web designer hanno la possibilità di aggiungere effetti ombra senza dover ricorrere ad immagini o ad espedienti di altro tipo.
La proprietà box-shadow
Questa proprietà consente di aggiungere, ad un quasiasi elemento della pagina, una o più ombre per ciascuna delle quali è possibile specificare una serie di caratteristiche. Vedimo un esempio:
div.ombra {
box-shadow: 3px 3px 5px 2px #777777;
}La sintassi di base di box-shadow prevede la definizione di quattro valori numerici:
- il primo valore indica la posizione dell'ombra lungo l'asse orizzontale: i valori positivi collocano l'ombra sul lato destro dell'elemento, quelli negativi sul lato sinistro;
- il secondo valore indica la posizione dell'ombra lungo l'asse verticale: i valori positivi collocano l'ombra sul lato inferiore dell'elemento, quelli negativi sul lato superiore;
- il terzo valore definisce il livello di blur (sfocatura) dell'ombra: maggiore è questo valore, maggiormente sfocata apparirà l'ombra (se si usa 0 l'ombra sarà netta e senza sfocatura; non sono ammessi valori negativi);
- il quarto valore definisce lo spread (diffusione) dell'ombra: maggiore è questo valore e più l'ombra tenderà ad espandersi in tutte le direzioni, viceversa valori negativi comportano una compressione dell'ombra.
Di questi quattro valori, i primi due sono obbligatori. Gli altri due valori (blur e spread) sono facoltativi e se omessi corrispondono a zero.
Il quinto valore del nostro esempio definisce il colore dell'ombra.
E' anche possibile definire un ulteriore valore: specificando la keyword inset l'ombra sarà collocata all'interno dell'elemento invece che al suo esterno.
Come utilizzare il nostro CSS3 box-shadow generator
Utilizzare il nostro tool per creare la sintassi CSS per la proprietà box-shadow è molto semplice: tutte le caratteristiche dell'ombra possono essere definite attraverso una semplice interfaccia grafica e con un'anteprima in tempo reale del risultato ottenuto.
- Per ogni elemento è possibile definire sia un'ombra interna che una esterna mettendo o togliendo la spunta all'opzione relativa;
- Per ogni ombra (interna/esterna) è possibile definire:
- il colore (inserendo il codice esadecimale o selezionando il colore dall'apposito color picker);
- posizione orizzontale e verticale dell'ombra;
- valore di blur e spread.
- Una volta completata la selezione dei valori sarà sufficiente copiare ed incollare il codice CSS generato automaticamente.
