Le ombre sono spesso utilizzate per rendere più visibile e far risaltare gli elementi. In questa lezione, vediamo due proprietà CSS che ti permettono di aggiungere le ombre a elementi e testo: box-shadow e text-shadow.
La proprietà box-shadow viene utilizzata per applicare un'ombra a un elemento. Può essere utilizzata su qualsiasi elemento all'interno della pagina (come <div>, <p>, <section>, ecc.).
La sintassi è box-shadow: offset-x offset-y raggio-sfocatura raggio-diffusione colore
Ecco come inserire i parametri di box-shadow:
Per prima cosa, vediamo come creare una semplice ombra:
<div class="ombra-semplice">Ombra semplice</div>
<style>
.ombra-semplice {
width: 200px;
height: 100px;
background-color: lightblue;
box-shadow: 10px 10px; /* offset-x e offset-y */
}
</style>In questo esempio, l'ombra è posizionata a 10 pixel verso destra (offset-x) e 10 pixel verso il basso (offset-y) rispetto all'elemento. Non è stata specificata né la sfocatura né il colore, quindi l'ombra apparirà perfettamente visibile e sarà nera per default. Ecco come verrà visualizzata:
Nella maggior parte dei casi, quando si crea un'ombra deve essere sfocata (e non così spessa come nell'esempio precedente). Per fare ciò, aggiungiamo un terzo valore:
<div class="ombra-sfocata">Ombra sfocata</div>
<style>
.ombra-sfocata {
width: 200px;
height: 100px;
background-color: lightcoral;
box-shadow: 10px 10px 20px; /* Anche il raggio della sfocatura */
}
</style>Qui l'ombra è posizionata a 10 pixel a destra e 10 pixel in basso, ma con un raggio di sfocatura di 20 pixel. Questo significa che l'ombra sarà più morbida e meno definita rispetto all'ombra del primo esempio. Ecco come si vede ora:
Per default l'ombra è di colore nero. Tuttavia, è possibile scegliere un diverso colore. Vediamo come farlo nell'esempio:
<div class="ombra-colorata">Ombra colorata</div>
<style>
.ombra-colorata {
width: 200px;
height: 100px;
background-color: DeepSkyBlue;
box-shadow: 10px 10px 15px 5px rgba(192, 192, 192, 0.5); /* colore */
}
</style>In questo esempio, l'elemento ha un'ombra con un offset di 10 pixel a destra e 10 pixel in basso, un raggio di sfocatura di 15 pixel e un raggio di diffusione di 5 pixel. Il colore dell'ombra è un grigio trasparente (rgba(255, 0, 0, 0.5)), che significa che l'ombra apparirà grigia con una trasparenza del 50%. Abbiamo parlato di come funziona RGBA nella lezione sui colori. Ecco come appare ora l'elemento:
Con la proprietà box-shadow di CSS, è possibile inserire l'ombra all'interno dell'elemento, inserendo il valore inset:
<div class="ombra-interna">Ombra interna</div>
<style>
.ombra-interna {
width: 200px;
height: 100px;
background-color: lightyellow;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5); /* inset */
}
</style>L'uso della parola chiave inset cambia l'ombra in un'ombra interna, che appare all'interno dei bordi dell'elemento anziché all'esterno. Ecco come si vede:
Le ombre multiple ti permettono di applicare più ombre ad uno stesso elemento. In questo caso, le due ombre si sovrapporranno. Ad esempio:
<div class="ombre-multiple">Ombre multiple su un box</div>
<style>
.ombre-multiple {
width: 200px;
height: 100px;
background-color: lightblue;
box-shadow: 5px 5px 10px rgba(0, 255, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.2);
}
</style>Nell'esempio, la prima ombra è posizionata a 5 pixel a destra e 5 pixel in basso, con un raggio di sfocatura di 10 pixel e un colore verde semitrasparente. La seconda ombra è posizionata a 5 pixel a sinistra e 5 pixel in alto, con le stesse dimensioni di sfocatura ma un colore rosso meno opaco. Ecco come appare:
Oltre agli elementi, CSS permette di aggiungere l'ombra anche alle scritte all'interno della pagina web. Lo si può fare utilizzando la proprietà CSS chiamata text-shadow. Ecco la sintassi da usare:
text-shadow: offset-x offset-y raggio-sfocatura colore
Vediamo ora i diversi valori da usare:
Per creare una semplice ombra ad un testo, facciamo in questo modo:
<p class="ombra-testo">Ombra semplice sul testo</p>
<style>
.ombra-testo {
font-size: 24px;
text-shadow: 2px 2px; /* offset-x e offset-y */
}
</style>L'ombra del testo è posizionata a 2 pixel a destra e 2 pixel in basso rispetto al testo. Non sono stati specificati né il raggio di sfocatura né il colore, quindi l'ombra sarà nera e con opacità predefinita.
Allo stesso modo di box-shadow, possiamo specificare il raggio della sfocatura dell'ombra e il colore. Ad esempio, ecco come creare un'ombra grigia:
<p class="ombra-testo">Ombra sfocata sul testo</p>
<style>
.ombra-testo {
font-size: 24px;
text-shadow: 2px 2px 5px grey; /* raggio della sfocatura e colore */
}
</style>L'ombra del testo è posizionata a 2 pixel a destra e 2 pixel in basso con un raggio di sfocatura di 5 pixel, il che rende l'ombra più morbida e sfumata. Appare in questo modo:
Ombra sfocata sul testo
Si possono aggiungere più ombre allo stesso testo, semplicemente separandole con la virgola:
<p class="ombre-testo">Ombre multiple sul testo</p>
<style>
.ombra-testo {
font-size: 24px;
text-shadow: 2px 2px 2px red, -2px -2px 2px blue;
}
</style>La prima ombra è rossa e posizionata a 2 pixel a destra e in basso, mentre la seconda ombra è blu e posizionata a 2 pixel a sinistra e in alto. In questo modo, le due ombre si sovrappongono.