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:
Colore:
Posizione orizzontale:
Posizione verticale:
Blur:
Spread:
Ombra esterna:
Colore:
Posizione orizzontale:
Posizione verticale:
Blur:
Spread:

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

clicca qui