Otra de las bondades del CSS3. Ya no es necesario realizar complicadas lineas de código en el CSS e incluir imágenes en formato png para aplicar una sombra a nuestra caja o div. Basta con una línea de código muy sencilla de entender:
box-shadow: -5px 5px 10px black;
Con esta sencilla linea aplicamos a nuestro div o caja una sombra que estará desplazada 5 píxeles a la izquierda, 5 píxeles hacia abajo, con un difuminado de 10 píxeles y de color negro. El primer número indica el desplazamiento horizontal, si es positivo la sombra se desplazará hacia la derecha y si es negativo hacia la izquierda. El segundo número indica el desplazamiento vertical, si es positivo la desplazamos hacia arriba y si es negativo hacia abajo. El tercer número indica el grado de difuminado de la sombra, este debe de ser siempre positivo cero píxeles indicarán que no tiene difuminado. Y por último indicamos el color, este lo podemos expresar también en hexadecimal, black (negro) sería #0000. No creo que sean necesarias más explicaciones, su uso es muy sencillo.
box-shadow: -5px 5px 10px black;
Con esta sencilla linea aplicamos a nuestro div o caja una sombra que estará desplazada 5 píxeles a la izquierda, 5 píxeles hacia abajo, con un difuminado de 10 píxeles y de color negro. El primer número indica el desplazamiento horizontal, si es positivo la sombra se desplazará hacia la derecha y si es negativo hacia la izquierda. El segundo número indica el desplazamiento vertical, si es positivo la desplazamos hacia arriba y si es negativo hacia abajo. El tercer número indica el grado de difuminado de la sombra, este debe de ser siempre positivo cero píxeles indicarán que no tiene difuminado. Y por último indicamos el color, este lo podemos expresar también en hexadecimal, black (negro) sería #0000. No creo que sean necesarias más explicaciones, su uso es muy sencillo.
Comentarios
Publicar un comentario