CSS3: Agregando sombras a las cajas

Antes había indicado como agregar sombra a nuestro texto, ahora veamos como agregar sombra a nuestros DIV o a cualquier elemento de nuestra página web, también funciona con elementos de esquinas redondeadas aunque allí el efecto pueda no quedar tan logrado como sería en Photoshop pero no esta nada mal.


En CSS3 se agrega la sombra con una sóla línea de código aunque esta varía según el navegador que estemos utilizando
[cc lang=»css»]
.box_shadow {
-moz-box-shadow: 2px 2px 4px #ffffff; /* FireFox3.5+ */
-webkit-box-shadow: 2px 2px 4px #ffffff; /* Safari 3.0+, Chrome */
box-shadow: 2px 2px 4px #ffffff; /* Opera 10.5, IE 9.0 */
}
[/cc]

Y quedaría algo como esto

Los dos primeros parámetros indican la distancia en cuanto X, Y respectivamente y el último valor nos da el color de la sombra.

Categorías

Últimos Posts

¿Necesitas ayuda?

Si requieres ayuda para desarrollar tu sitio web, crear plugins para Wordpress o módulos personalizados para Elementor a precio razonable. Contáctame