Bordes con sombras
Ademas de los bordes
lineales y los personalizados con imágene, podemos construir cuadros
contenedores con un efecto de sombra. Para eso usaremos la propiedad box-shadow. Esta caja o bloque aparecerá como si estuviera por encima del texto de la página o deprimido, como hundido entre el texto y el fondo. Es un efecto interesante para botones (con javascript) o para paneles de notificación o para simular una tarjeta.
Un ejemplo es éste código
#cajasombra{
background-color: #ddd;
width: 300px;
padding: 10px;
box-shadow: 5px 5px 3px #333;
}
En total este nuevo efecto (box-shadow) necesita 5 atributos.
| Atributo | Uso | Valor |
|---|---|---|
| inset | Efecto de hundido bajo el texto. Es opcional | |
| offset-x, offset-y | Distancia de la sombra al borde. Admite valores positivos y negativos. | Numro |
| blur-radius | Es la cantidad de difuminado, a mayor valor mayor efecto difuminado | Número |
| spread-radius | Es el ancho de la sombra | Número |
| color | El color de la sombra. Es opcional | Código de color |
Los cinco valores pueden darse especificarse en el modo abreviado siguiendo el orden de la tabla para los valores numéricos.
box-shadow: 5px 5px 6px 4px #333;
este cuadro representa una caja con sombra abajo a la derecha
en este ejemplo se aplica una sombra a un bloque con borde
El sombreado puede ser util para dar una cierta idea de 3D en el documento. A mayor valor de los offset-x offset-y más elevado parece el elemento sobre el fondo. Una luz fuerte y próxima se simula con un valor bajo para el difuminado, blur-radius.