CSS3 Box Shadow Generator

Un utile strumento on-line per generare, in modo automatico ed intuitivo, la sintassi della proprietà box-shadow di CSS3 grazie alla quale potrete applicare un gradevole effetto ombra ai box delle vostre pagine web.

Ombra interna (inset)

5 px
5 px
10 px
0 px

Ombra esterna

5 px
5 px
10 px
0 px

Ecco l'effetto di

CSS3 box-shadow

 

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.

Altri tool interessanti