GESTIRE LE OMBRE DEI BOX

L'istruzione è la seguente :

box-shadow : val1 val2 val3 val4 val5 inset

obbligatorio

facoltativo

val1 : sposta l'ombra in senso orizzontale. I valori positivi visualizzano l'ombra a destra, valori negativi visualizza l'ombra a sinistra (valore obbligatorio). (es. 5px).

val2 : sposta l'ombra in senso verticale. I valori positivi visualizzano l'ombra in basso al box, valori negativi visualizzano l'ombra in alto (valore obbligatorio). (es. 5px).

val3 : sfocatura (blur radius) dell'ombra : il valore 0 rende l'ombra netta, mentre i valori più alti rendono l'ombra più sfocata (non si possono usare valori negativi). Se non usato nel codice il valore di default è 0px.

val4 : (livello di diffusione) più i valori sono alti e più l'ombra si espande in tutte le direzioni, per valori negativi si rimpicciolisce fino a scomparire. Se non usato nel codice il valore di default è 0px.

val5 : indica il colore dell'ombra usando il classico metodo #XXXXXX (ove X sono cifre esadecimali).

inset : se viene scritta nel codice l'ombra è interna al box (al lato opposto a quella che avrebbe esternamente), se viene omessa l'ombra appare all'esterno del box. La posizione dipende dai comandi precedenti.

Abbinando valori diversi si possono ottenere effetti combinati in tutte le combinazioni. Si possono inserire più ombre inserendo più blocchi di valori separati da una virgola.

Codice d'esempio HTML

Codice d'esempio CSS

<!DOCTYPE html>

<html>

<head>

<title>Ombre box</title>

</head>

<body>

<div class="box1"

<p>Box per le ombre</p>

<p>Questo contenuto serve per riempire l'interno

Questo contenuto serve per riempire l'interno

</p>

</div>

</body>

</html>

.box1

{

position: absolute;

background-color: yellow;

top: 50px;

left: 50px;

width: 250px;

height: 250px;

min-height: 200px;

min-width: 200px;

padding: 10px;

margin: 10px;

box-shadow: 10px 10px 50px -10px #00FF00;

}

Il risultato è

Usare il codice d'esempio per provare gli effetti cambiando i valori.