Crea tu Web: Indice de diseño

Cajas con sombras
Ademas de los bordes , podemos construir cuadros contenedores de imágnes o de texto con efecto sombra. Se usa el tributo box-shadow pero volvemos al problema de compatibilidades, por ello es necesario usar los prefijos para cada tipo de navegador.

Un ejemplo es éste código

#cajasombra{
background-color: #ddd;
width: 300px;
padding: 10px;
box-shadow: 5px 5px 3px #333;
-webkit-box-shadow: 5px 5px 3px #333;
-moz-box-shadow: 5px 5px 3px #333;

}

En total este nuevo efecto (box-shadow) necesita 4 atributos:

Desplazamiento horizontal de la sombra respecto a la caja

Desplazamiento vertical de la sombra respecto a la caja

Difuminado de la sombra, 0 indica ningún difuminado

Por último el color de la sombra

este cuadro representa una caja con sombra abajo a la derecha

Dentro podéis colocar lo que queráis, a fin de cuento noes más que un elemnto DIV.

 

arriba


Comunidad Virtual. Alojamiento gratis