You are here
Ejemplo de Sombras con CSS3 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