3) Nuove funzionalità CSS3 – Box ombreggiati ed effetto bagliore

Box ombreggiati ed effetto bagliore

Tramite CSS 3 è possibile aggiungere virtualmente una ombra ad ogni elemento della pagina web, utilizzando semplicemente la proprietà “box shadow”, potendo impostare il colore RGBA, quindi potendo impostare anche un valore trasparenza. Vediamo un esempio:

.ombra {
	box-shadow: 10px 10px 5px 12px #888888;
}

La sintassi di questo codice è molto simile al “text-shadow”: è presente l’offset orizzontale e verticale (10px e 10px), il valore di sfumatura (5px), e per ultimo il valore dell’colore. È presente anche un nuovo valore: lo “spread” (12px), ok…. non c’entra con la Germania ma precisamente è il valore di dimensione dell’ombra, si nota perchè l’ombra appare più grande del box, affacciandosi anche dai lati opposti della direzione dell’ombra.

È possibile anche aggiungere il valore “inset” alla fine del codice, che cambia la direzione dell’ombra verso l’interno.

.ombra {
	box-shadow: 10px 10px 5px 12px #888888 inset;
}

Modificando ancora alcuni valori, si possono ottenere effetti simpatici di bagliore, per esempio il seguente codice crea un bagliore arancione attorno al box, basta impostare a 0 l’offset orizzontale e verticale per centrare l’ombra, inserire un valore di colore arancione e l’effetto è bello e pronto:

.ombra {
	box-shadow: 0px 0px 10px 15px #fe8a3d;
}

Mentre il seguente codice realizza un bagliore azzurro interno, basta aggiungere il valore “inset”:

.ombra {
	box-shadow: 0px 0px 12px 5px #2087d2 inset;
}
Condividi questo articolo su:

Facebook Twitter Linkedin Digg Email

Leave a Comment

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">


− quattro = 3