La mayoría de aplicaciones de diseño gráfico permiten añadir una sombra (llamada drop shadow en inglés) a las imágenes. CSS no incluye propiedades que permitan mostrar de forma sencilla sombras en los elementos.
No obstante, existen varias técnicas sencillas y otras más avanzadas que permiten crear sombras que se adapten a cualquier imagen o elemento. A continuación se muestra una técnica sencilla para añadir sombra a las imágenes.
Esta propiedad permite poner una sobra a un texto. Vea también aqui.
text-shadow: horizontal vertial color;
#simple {
text-shadow: 2px 5px red;
}
#doble {
color: blue;
text-shadow: 2px 2px black, 3px 3px red;
}
#triple {
text-shadow: 2px 5px red, 2px -5px red, 2px 0 red;
}
#redondeada {
color: coral;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
Esta propiedad permite poner una sobra a una caja. Vea también aqui.
box-shadow h-offset v-offset [blur] [spread] [color] [inset];
Se puede poner multiples sobras.
div {
width: 200px;
height: 50px;
background-color: lightgreen;
border: 1px solid black;
}
#simple{
box-shadow: -3px 5px red;
}
#desenfoque{
box-shadow: 3px 5px 2px red;
}
#radio{
box-shadow: 3px 5px 2px 5px red;
}
#doble{
box-shadow: -3px 5px red, 3px -5px blue;
}
#triple{
box-shadow: -3px 5px red, 3px -5px blue, 10px 10px darkgreen;
}