Aggiunta di Ombre per la Profondità

Possiamo utilizzare le ombre delle box per creare un effetto visivo in cui un elemento sembra fluttuare sopra lo sfondo. Questo effetto può aggiungere profondità, evidenziare elementi specifici e aumentare l'interesse visivo di una pagina web. Per ottenere questo risultato, possiamo applicare la proprietà box-shadow.

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;

• offset-x indica il posizionamento orizzontale dell'ombra: un valore positivo sposta l'ombra a destra dell'elemento, mentre un valore negativo la sposta a sinistra;
• offset-y indica il posizionamento verticale dell'ombra: un valore positivo sposta l'ombra verso il basso, mentre un valore negativo la sposta verso l'alto;
• blur-radius imposta il grado di sfocatura dell'ombra ed è un valore opzionale; un valore più alto produce un'ombra più sfocata;
• spread-radius è anch'esso opzionale e aumenta o diminuisce la dimensione dell'ombra in base al valore positivo o negativo;
• color specifica il colore dell'ombra utilizzando qualsiasi formato colore valido, ed è anch'esso un valore opzionale.

Oltre a box-shadow, le proprietà text-shadow e drop-shadow permettono di creare ombre rispettivamente per il testo e per altri elementi. Funzionano nello stesso modo della proprietà box-shadow. Tuttavia, queste proprietà sono utilizzate raramente rispetto a box-shadow..