Integración Web Programación 

Ejemplo de Sombras con CSS3

Ejemplo de Sombras con CSS3

Ahora veamos un ejemplo de sombras creadas directamente con CSS 3 y el atributo box-shadow, con sus variantes para compatibilidad temporal en los navegadores Mozilla o WebKit.

#cajasombra{
background-color: #ddd;
width: 300px;
padding: 10px;

box-shadow: 5px 5px 0 #333;
-webkit-box-shadow: 5px 5px 0 #333;
-moz-box-shadow: 5px 5px 0 #333;
}

Esto crearía una capa con un gris claro como color de fondo y una sombra desplazada abajo y a la derecha en 5 píxeles y sin difuminado. Además, hemos definido un color de sombra gris oscuro para el elemento.

#sombraclara{
width: 200px;
padding: 10px;
background-color: #999;
color: #fff;

box-shadow: 2px 2px 2px #ffc;
-webkit-box-shadow: 2px 2px 2px #ffc;
-moz-box-shadow: 2px 2px 2px #ffc;
}

Related posts