Sombreados para capas en HTML5 y CSS3
Veamos cómo darle un sombreado a los bordes de nuestras capas. Para ello hay que tener en cuenta ciertas bases:
- el color: se establecerá en rgb() o en valor hexadecimal
- el desplazamiento de la sombra: son dos valores que indican la distancia horizontal y vertical desde la sombra al elemento:
- Valores negativos: posicionaremos la sombra a la izquierda y en la parte superior del elemento.
- Valores positivos: posicionaremos la sombra a la derecha y en la parte inferior de la capa.
- Valor cero (0): la sombra quedará detrás de la capa, con lo que podremos crear un efecto difuminado
- la distancia de difuminación: es la transparencia de la sombra, cuanto más alto sea el valor (en pixels), más difuminada aparecerá la sombra
box-shadow
Veamos la forma de escribir esta propiedad:
box-shadow: color desplazamiento_horizontal desplazamiento_vertical distancia;
Para crear un efecto de sombra interna en la capa, añadiremos al final de los valores la palabra inset
Esto es una capa
con una sombra
y el siguiente código:
box-shadow:rgb(150,150,150,0.5) 5px 5px 10px;
Has aquí hemos visto cómo darle formato y vistosidad a nuestras capas con bordes y sombras que destacan y nos ayudan a que la atención del lector vaya directamente hacia ellas, lo siguiente que tendremos que hacer será estasblecer un fondo, cosa que veremos en el siguiente tema
SI QUIERES VER EJEMPLOS DE SOMBREADOS PARA CAPAS EN HTML5 Y CSS3, Y CÓMO UTILIZARLOS PARA CREAR EFECTOS LLAMATIVOS PARA NUESTRAS CAPAS, ADEMÁS DE ESTE TEMA DESARROLLADO, HAZ CLIC AQUÍ
