Effetto ombra con i CSS
Tra le novità più rilevanti introdotte da CSS3 per gli effetti grafici troviamo la proprietà box-shadow, insieme a border-radius. Grazie a box-shadow, i web designer possono aggiungere ombre decorative agli elementi HTML senza ricorrere a immagini o workaround complessi.
La proprietà box-shadow
La proprietà box-shadow consente di applicare a qualsiasi elemento della pagina una o più ombre, ciascuna personalizzabile nei suoi parametri. Ecco un esempio di sintassi CSS:
div.ombra { box-shadow: 3px 3px 5px 2px #777777; }Nel dettaglio, la sintassi prevede fino a cinque valori:
- Offset orizzontale: il primo valore indica lo spostamento lungo l'asse X. Valori positivi spostano l'ombra verso destra, negativi verso sinistra.
- Offset verticale: il secondo valore definisce lo spostamento lungo l'asse Y. Positivi verso il basso, negativi verso l'alto.
- Blur (sfocatura): il terzo valore controlla la sfocatura dell'ombra. Più è alto, più l'ombra apparirà diffusa. Il valore 0 produce un'ombra netta. Non sono ammessi valori negativi.
- Spread (espansione): il quarto valore regola l'espansione dell'ombra. Valori positivi la fanno espandere oltre i bordi dell’elemento, valori negativi la restringono.
- Colore: infine, si specifica il colore dell’ombra, generalmente in formato esadecimale (es.
#777777).
I primi due valori (offset orizzontale e verticale) sono obbligatori, mentre blur e spread sono facoltativi e, se omessi, verranno considerati pari a zero.
È inoltre possibile inserire la keyword inset per creare un’ombra interna all’elemento, anziché esterna.
Come utilizzare il nostro generatore CSS3 box-shadow
Il nostro box-shadow generator ti permette di generare in pochi secondi la sintassi CSS completa grazie a una comoda interfaccia grafica con anteprima in tempo reale.
- Puoi definire un'ombra esterna, interna oppure entrambe, attivando o disattivando le relative opzioni.
- Per ciascuna ombra puoi personalizzare:
- Colore: digitando il codice esadecimale o selezionandolo tramite il color picker.
- Posizione orizzontale e verticale (offset).
- Valore di blur (sfocatura) e spread (espansione).
- Una volta impostati i parametri desiderati, sarà sufficiente copiare il codice CSS generato e incollarlo nel tuo foglio di stile.
