Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

CSS3 VI

Sombras

Efectos de sombras

Uno de los efectos gráficos más demandados por los diseñadores es el poder dar el efecto de sombra a los elementos de una manera sencilla. Hasta ahora los diseñadores debían recurrir a trucos tales como poner elementos adicionales en segundo plano, o crear imágenes que simularan el efecto sombra. Con CSS3 se puede por fin crear sombras de una manera sencilla, simplemente aplicando una propiedad al elemento.

En el curso de CSS de Aprende Web ya se hablo sobre la posibilidad de poner sombras con el nuevo CSS3 : Curso CSS/10.4 Otros trucos. Recordaremos lo visto en este punto y lo ampliaremos.

Sombras en cajas: box-shadow

La propiedad box-shadow nos da la posibilidad de crear una sombra a cualquier elemento de la página, ya sea de bloque o en línea.

Los valores de esta propiedad son de 2 a cuatro medidas, siendo las dos primeras obligatorias y las otras dos opcionales, un color (opcional) y la palabra reservada inset (opcional), que podemos ponerla tanto al principio como al final.

box-shadow=inset? && [ <medida>{2,4} && <color>? ]</p>

Además podemos poner varias sombras en una misma caja, para ello volveremos a dar valores de una segunda sombra, los cuales van separados por una coma de los de la primera : con lo que la definición de la propiedad queda de la siguiente manera:

box-shadow: <sombra> [ , <sombra> ]*

<sombra> = inset? && [ <medida>{2,4} && <color>? ]

Veamos los valores que definen una sombra de forma más detallada:

La sombra reproduce la silueta de su elemento, si el elemento tiene por ejemplo, bordes redondeados, éstos se reproducirán en la sombra.

Compatibilidad en navegadores.

Desde hace algún tiempo Firefox ha adoptado esta propiedad de forma experimental, utilizando la forma -moz-box-shadow. Safari y Chrome también la utilizan desde hace algun tiempo en la forma -webkit-box-shados.

Sin embargo tanto Firefox, como Safari y Chrome en sus últimas versiones han adoptado ya la forma estándar. Opera también ha compatibilizado esta propiedad en su última versión (11.5); Internet Explorer no soporta esta propiedad, sin embargo todo parace apuntar a que en su nueva version (IE 9), estará ya disponible.

Ejemplos de cajas con sombras:

veamos algunos ejemplos de cajas con sombras: dentro de la caja hemos puesto el código CSS:

#capa1 {width: 500px; border:5px double blue;
        box-shadow: 30px 15px 10px -20px #555;
        }


#capa2 {width: 500px; border:5px duble green;
        border-radius: 15px;
        box-shadow: -10px 20px 5px 5px #9f9;
       }


#capa3 {width: 500px; border:2px solid black;
        box-shadow: -10px -5px 5px #77f,
                    10px 5px 5px  #7ff,
                    -10px -5px 5px #f77 inset,
                    10px 5px 5px  #7f7 inset;
       }

Recuerda que debes usar Firefox, Safari, Chrome o Opera en su versión más reciente para poder ver bien los ejemplos anteriores.

Sombras en Internet Explorer

Internet Explorer no admite la propiedad box-shadow, sin embargo Internet Explorer tiene unos mecanismos llamados "filtros", los cuales son como propiedades tipo CSS, y que sólo funcionan en Internet Explorer.

Internet Explorer tiene dos filtros para crear sombras en elementos, estos son "DropShadow" y "Shadow".

El que más se asemeja a la propiedad box-shadow es el filtro "DropShadow" con el cual se crea una sombra y se indica su desplazamiento horizontal y vertical. No admite ni desenfoque ni dispersión, con lo que se crea una sombra opaca y nítida. Los filtros funcionan de forma parecida a una propiedad CSS, veamos la primera caja de los ejemplos anteriores con un filtro para Internet Explorer: Escribiremos la propiedad box-shadow y después el filtro, de forma que cada navegador interpretará el código que le es compatible, e ignorará el resto.

#capa1 {width: 500px; border:5px double blue;
  background-color: white; overflow: auto
  box-shadow: 30px 15px 10px -20px #555;
  filter:progid:DXImageTransform.Microsoft.DropShadow 
        (color=#555555 OffX=30 OffY=15); )
  }

En primer lugar necesitamos dar un color opaco de fondo a la caja para que el filtro funcione bien, para ello hemos usado el background-color. La propiedad filtro se escribe de la siguiente manera: Primero escribimos "filter:progid:DXImageTransform.Microsoft." seguido del nombre del filtro. Después, entre paréntesis se escriben los valores indicando su nombre, el signo igual, y el valor. En este caso es: "(color=#555555 OffX=30 OffY=15); donde color es un color en hexadecimal, (no podemos ponerlo abreviado), OffX es el desplazamiento horizontal en pixeles, y OffY es el desplazamiento vertical en píxeles.

El resultado no es el mismo, ya que falta el desenfoque y la dispersión, pero es una alternativa para ver sombras en Internet Explorer.

La otra alternativa es usar el filtro "Shadow". Este filtro crea una proyección de la imagen del elemento dando la sensación de sombra. Veamos una adaptación del segundo ejemplo:

#capa2 {width: 500px; border:5px duble green;
        background-color: white;
        border-radius: 15px;
        box-shadow: -10px 20px 5px 5px #9f9;
        filter:progid:DXImageTransform.Microsoft.Shadow
             (color=#99ff99 direction=225 strength=20)
       }

Los valores de este filtro son "color", que debe ponerse en hexadecimal; "direction" que se mide en grados e indica la dirección que tomará la sombra, sólo admite los siguientes valores: 0, 45, 90, 135, 180, 225, 270, 315; e indica la dirección de la sombra en grados partiendo de la parte de arriba (0) y siguiendo el sentido horario; "strength", que indica la distancia, en píxeles de la extensión de la sombra. Al igual que en el anterior debemos poner un color de fondo en el elemento si no queremos ver la sombra también de los elementos interiores (texto y otros) de la caja.


Textos con sombras

En CSS3 tenemos también la posibilidad de poner sombra al texto, para ello utilizaremos la propiedad text-shadow. Crea una sombra en el texto del elemento seleccionado.

Valores de text-shadow:

Los valores que admite text-shadow son los mismos que para box-shadow, excepto la cuarta medida, y la palabra clave inset, que no están permitidos

Por tanto pondremos de 1 a 3 medidas, y un color. Al igual que con box-shadow, solo las dos primeras son obligatorias y representan el desplazamiento horizontal y vertical respectivamente de la sombra. La tercera medida es el radio de dispersión, y sólo admite valores positivos.

text-sadow permite también poner varias sombras en un sólo elemento separando los valores de cada una de ellas por comas.

La propiedad text-shadow es compatible con las últimas versiones de los siguientes navegadores: Firefox, Safari, Chrome y Opera.

Ejemplos de text-shadow

En los siguientes ejemplos damos primero el código CSS y después el resultado en la página:

text-shadow: 7px 7px #aaa;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit,

text-shadow: -8px -5px 2px #f0f;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit,

text-shadow: 8px -10px 1px #0f0, -8px 3px 2px #0ff;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit,

Recuerda que debes usar Firefox, Safari, Chrome o Opera en su versión más reciente para poder ver bien los ejemplos anteriores.






En la siguiente página veremos otro de los efectos que pueden conseguirse fácilmente con CSS3: Las transparencias de color.

Transparencias



Manual CSS3

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo