Uno de los efectos más requeridos por los diseñadores en los últimos tiempos, es el de poder crear sombras del tipo «drop-shadow» en cualquier elemento del documento HTML.
Y esto es posible con CSS3.
A continuación te muestro como crear sombras CSS, compatible con todos los navegadores.
La regla de CSS para crear una sombra gris ubicada abajo a la derecha, es la siguiente:
.elemento {
box-shadow: 2px 2px 5px #999;
}
Con esto crearíamos una clase llamada «elemento» que aplicada a cualquier elemento del HTML, le generaría una sombra hacia abajo y a la derecha, y con un color gris.
No obstante, esta regla debe ser modificada para que funcione en los navegadores actuales.
SAFARI, FIREFOX y CHROME
En el Safari 3 y Chrome, la sintaxis correcta de la propiedad, es:
-webkit-box-shadow
Y en el Firefox 3.1, la sintaxis correcta de la propiedad, es:
-moz-box-shadow
La sintaxis completa de esta propiedad -box-shadow, es bastante compleja, por lo que a continuación definiré una sintaxis típica:
box-shadow: <medida> <medida> <medida>? <medida>? <color>
– La primera medida es obligatoria e indica el desplazamiento horizontal de la sombra. Si el valor es positivo, la sombra se desplaza hacia la derecha y si es negativo, se desplaza hacia la izquierda.
– La segunda medida también es obligatoria e indica el desplazamiento vertical de la sombra. Si el valor es positivo, la sombra se desplaza hacia abajo y si es negativo, se desplaza hacia arriba.
– La tercera medida es opcional e indica el radio utilizado para difuminar la sombra. Cuanto más grande sea su valor, más borrosa aparece la sombra. Si se utiliza el valor 0, la sombra se muestra como un color sólido.
– La cuarta medida también es opcional e indica el radio con el que se expande la sombra. Si se establece un valor positivo, la sombra se expande en todas direcciones. Si se utiliza un valor negativo, la sombra se comprime.
– El color indicado es directamente el color de la sombra que se muestra.
Entonces para crear una sombra que se visualice en los navegadores Firefox, Safari y Chrome, la sintaxis completa de la regla sería la siguiente:
.elemento {
-webkit-box-shadow: 2px 2px 5px #999;
-moz-box-shadow: 2px 2px 5px #999;
}
INTERNET EXPLORER
El navegador Internet Explorer, tiene un mecanismo propio para generar sombras que se basa en el uso de filtros , y los mismos se utilizan para operaciones complejas en los elementos del documento.
La sintaxis habitual para el filtro de sombra del navegador Internet Explorer, es la siguiente:
filter: progid:DXImageTransform.Microsoft.Shadow(color=’#666666′, Direction=45, Strength=4);
– color, establecido mediante el formato hexadecimal (ejemplo: #666666).
– direction, dirección hacia la que se desplaza la sombra. Su valor se indica en grados y sólo se permiten los valores 0, 45, 90, 135, 180, 225, 270 y 315.
– strength, distancia en píxeles hasta la que se extiende la sombra.
CODIGO FINAL (Firefox, Safari y Internet Explorer)
Entonces la regla final de CSS que incluye la sombra en los 3 navegadores, es la siguiente:
.elemento {
-webkit-box-shadow: 2px 2px 5px #999;
-moz-box-shadow: 2px 2px 5px #999;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=4);
}
Esta clase «elemento» que hemos creado, la podemos aplicar a cualquier elemento dentro del documento HTM y asi obtener un efecto de sombra sin tener que utilizar imágenes de fondo, con lo que reducimos considerablemente el tiempo de carga del documento.
Si quieres aprender de forma seria y profesional,
el arte de la maquetación web con CSS3,
te recomiendo el siguiente recurso:
Excelente, este codigo me ha sido de gran utilidad, antes lo hacia a punta de imagenes al igual que los bordes,
gracias denuevo
Gracias por la información, desconocía el método de las sombras para Internet Explorer… Siempre complicando las cosas ese navegador.
Saludos.
jeje si tienes razon.
Pues ahi lo tienes !
Saludos.
Cristian
Muy buen apunte lo utilizaré en mis próximos proyectos
Primero que nada gracias por el tutorial, numero dos queria saber si me podias ayudar, cual seria el cogio apra tener sombra por todos los lados, y segundo, como le pongo sombra a algo que tiene las ezquinas redondeadas, con ese codigo sale sombra como si tuviera ezquinas rectas, pero en mi caso son redondas gracias
Luis
Para poner sombras sobre todos lados, debes llevar a cero los dos primeros parametros de box-shadow, es decir, sin desplazamiento horizontal ni vertical.
Ejemplo:
box-shadow: 0px 0px 10px #999;
Con esto obtienes sombras sobre los todos los lados de un elemento.
Saludos!
Cristian
¿Y para poner sombras por todos lados en IE?. Sólo logro ponerla en 2 lados.
Un saludo.
Hola Pablo
Para agregarle sobras en todos lodos en IE, utilizas dento del CSS del elemento, la siguiente propiedad:
filter:progid:DXImageTransform.Microsoft.Glow(Color=#666666,Strength=5);
Donde «color» es el color de la sombra y «strength» es la fuerza.
En este caso le di un color gris #666666, y una fuerza de 5.
Saludos!
Cristian
Holas Cristian,
arreglado!!! muchísimas gracias. Me ha sido de gran utilidad y ya me funciona!!!!
Un saludo.
Buenas yo quiero aplicarle esa sombra a una tabla
se podria hacer? y como? porque yo estoy usando HTML y al combinarlo con CSS me confundo como aplicar esa sombra a una tabla creada en HTML le agradeceria sobremanera que me ayuden GRACIAS
Hola Luis
Si claro que puedes aplicarle sobra a un tabla.
Lo haces aplicandole la clase CSS que creaste.
(clase llamada «elemento» dentro del ejemplo de arriba)
Para aplicarlo a una tabla, y suponiendo que la clase que creaste se llame «elemento», debes incluir dentro de tu etiqueta de tabla, lo siguiente:
class=»elemento»
(perdón pero aquí en los comentarios no me deja copiar codigo HTML)
Saludos!
Cristian
PD: en IE, si la tabla no tiene bordes, no se ve la sombra.
genial, ya decía yo por que no me salían las sombras en chrome, saludos amigo gracias
Agregué el código a mi CSS pero no veo las sombras. Uso firefox. Que puede evitar que se vean las sombras aplicadas?
Gracias.
Agregaste los prefijos -moz y -webkit para que funcione?
Sino postea aqui el codigo.
Cristian
generalmente cuando quiero hacer efectos en mi pagina uso bastante esta pagina para resolver alguna duda sobre css… me gusta mucho am igo un saludo!