6.1 Proprietà box-shadow
La proprietà box-shadow in CSS viene usata per aggiungere ombre agli elementi. Questa proprietà permette di creare una vasta gamma di effetti visivi, migliorando l'aspetto delle pagine web. Guardiamo nel dettaglio la sintassi, i valori e gli esempi di utilizzo di box-shadow.
Sintassi di box-shadow
La proprietà box-shadow accetta uno o più valori, ognuno dei quali definisce i parametri dell'ombra. La sintassi generale è la seguente:
element {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
Valori:
offset-x: spostamento orizzontale dell'ombra. I valori positivi spostano l'ombra a destra, quelli negativi a sinistraoffset-y: spostamento verticale dell'ombra. I valori positivi spostano l'ombra in basso, quelli negativi in altoblur-radius: raggio di sfocatura dell'ombra. Maggiore è il valore, più sfocata sarà l'ombra. Il valore predefinito è 0 (ombra senza sfocatura)spread-radius: raggio di espansione dell'ombra. I valori positivi aumentano le dimensioni dell'ombra, quelli negativi le diminuiscono. Il valore predefinito è 0color: colore dell'ombra. Sono supportati tutti i formati colore CSS
6.2 Esempi di utilizzo
Ombra di base:
.shadow-basic {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-basic">Ombra di base</div>
</body>
Ombra sfocata:
.shadow-blur {
width: 200px;
height: 200px;
background-color: #2ecc71;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-blur">Ombra sfocata</div>
</body>
Ombra con diffusione:
.shadow-spread {
width: 200px;
height: 200px;
background-color: #e74c3c;
box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-spread">Ombra con diffusione</div>
</body>
Ombra interna:
.shadow-inset {
width: 200px;
height: 200px;
background-color: #f1c40f;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-inset">Ombra interna</div>
</body>
6.3 Impostazioni di box-shadow
Dettagli delle impostazioni di box-shadow:
Spostamento ombra (offset-x e offset-y)
- Valori positivi: l'ombra viene spostata a destra (
offset-x) e in basso (offset-y) - Valori negativi: l'ombra viene spostata a sinistra (
offset-x) e in alto (offset-y)
Sfocatura ombra (blur-radius)
- Valore 0: l'ombra sarà netta, senza sfocatura
- Valori positivi: maggiore è il valore, più sfocata sarà l'ombra
Diffusione ombra (spread-radius)
- Valori positivi: l'ombra aumenta di dimensioni
- Valori negativi: l'ombra diminuisce di dimensioni
Colore dell'ombra (color)
Il colore può essere specificato in vari formati: nome del colore, codice esadecimale, RGB, RGBA, HSL, HSLA.
Ombra interna (inset)
La parola chiave inset crea un'ombra all'interno dell'elemento, che può essere usata per creare un effetto incavato.
Multiple ombre con parametri diversi:
.multiple-shadows {
width: 200px;
height: 200px;
background-color: #bdc3c7;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 15px rgba(0, 0, 0, 0.3);
margin: 20px;
}
<body>
<div class="multiple-shadows">Multiple ombre</div>
</body>
GO TO FULL VERSION