 |
Sombras interiores (box-shadow)
La propiedad CSS box-shadow añade efectos de sombra alrededor del marco de un elemento, por eso comenzamos con la sintaxis básica. En general, el fragmento de código de la sombra de caja puede parecer bastante intimidante, pero si lo desglosa como lo hemos hecho, en realidad es realmente simple.
Otra posibilidad de la propiedad box-shadow es la de implementar la sombra interior al objeto, para esto debemos anteceder a los valores la palabra inset. Por ejemplo si queremos un recuadro con sombra interior de color rojo y sombra exterior de color amarilla podemos aplicar los siguientes valores:
box-shadow: inset 0px 0px 40px #f00, 0px 0px 40px #ff0;
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}
El código anterior mostrará lo siguiente:
Recuadro 1
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,
Las sombras las podemos utilizar para imágenes como en el ejemplo que sigue:
<html>
<head>
<style>
div.polaroid {
width: 250px;
box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.container {
padding: 10px;
}
</style>
</head>
<body>
<h2>Tarjetas Polaroid en Imágenes</h2>
<p>La propiedad box-shadow se puede utilizar para crear tarjetas similares al papel:</p>
<div class="polaroid">
<img src="rock600x400.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>Hardanger, Noruega</p>
</div>
</div>
</body>
</html>
Tarjetas Polaroid en Imágenes
La propiedad box-shadow se puede utilizar para crear tarjetas similares al papel:
Hardanger, Noruega