w3.unpo<code>todo

Cajas con sombra

Todo lo que sabemos acerca de text-shadow puede ser aplicado a box-shadow. Es como si fuera la misma propiedad con otro nombre. Sin embargo hay algunos toques especiales. Empecemos con la sintaxis.

Extension (spread)

Analicemos este ejemplo donde tanto el desplazamiento horizontal como el vertical tienen el valor 0. La sombra quedaría debajo de la caja, si no fuera por la extensión ( 1px en este caso ).

#caja1{box-shadow: 0px 0px 5px 1px black;}

La extensión acepta valores negativas como en el siguiente ejemplo donde la #caja3 tiene el mismo estilo que la #caja2 pero con una extensión negativa (-6px) de la sombra.

#caja2{box-shadow: 0px 10px 10px black;}
#caja3{box-shadow: 0px 10px 10px -6px black;}

Sombra interior (inset)

También podemos aplicar una sombra interior a nuestra caja utilizando la palabra clave inset.

#caja4{box-shadow: 0px 0px 10px 0px #333 inset;}

Ponle una sombra con drop-shadow

Pero no siempre tenemos cajas regulares. Pensemos un momento en un bocadillo ( como elemento de viñeta ). En el siguiente ejemplo para dibujar un bocadillo utilizamos una caja rectangular <div class="sombra_svg"> y un pseudo-elemento ::before para dibujar la flecha. Si queremos ponerle una sombra normal ( box- shadow:1px 1px 2px #333; ) la flecha queda sin sombra. Podemos darle una sombra al ::before, pero en este caso la sombra aparece marcada por encima del bocadillo :(. La solución: utilizar  filter: drop-shadow().

Lea más sobre filtros en CSS

Aunque la sintaxis se le parece, filter: drop-shadow() no es lo mismo que box-shadow.

.sombra_svg {
	position: relative;
	margin:auto;
	display:-webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
	-webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
	box-sizing: border-box;
	width: 6em;
	height: 5em;
	background: #ff9;
	/*box-shadow:1px 1px 2px #333;*/
	-webkit-filter: drop-shadow(0px 0px 5px #333);
	filter: drop-shadow(0px 0px 5px #333);
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:16px;
	text-align: center;
	white-space: normal;
}

.sombra_svg span{ text-align:center;}
.sombra_svg::before {
	content: "";
	position: absolute;
	top: 4.5em;
	right: 2.5em;
	width: 1em;
	height: 1em;
	background-color: #ff9;
	transform : rotate(45deg);
	/*box-shadow:0px 0px 5px #333*/;
}

¡Soy un bocadillo!