Il CSS 3 ha introdotto la proprietà box-shadows che serve a generare le ombre per i riquadri HTML.
L’ombra è un effetto che se usato con parsimonia aggiunge un tocco in più alla vostra pagina internet, conferendole un aspetto più professionale.
Vediamo una semplice struttura che incorpora la proprietà box-shadows:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
div {
/* assegnamo la proprietà al tag div */
width: 70%;
padding: 20px;
background-color:#b0c4de;
border-radius: 20px;
box-shadow: 30px 20px 25px 0px #666;
}
</style>
</head>
<body>
<!-- Inseriamo un Dummy Text nel div -->
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
</body>
</html>
Il risultato del codice rappresentato è il seguente:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Analizziamo la riga:
box-shadow: 30px 20px 25px 0px #666;
che tradotta significa:
crea un’ombra: spostamento dell’ombra in x 30 pixel, spostamento dell’ombra in y 20 pixel, raggio della sfuocatura 25 pixel, dimensione dell’ombra 0 pixel (dimensione uguale al riquadro div), colore dell’ombra.
