Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Nuevo CSS3

Nuevas tendencias en el estilo y diseño de páginas con CSS3.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 45

Visitas el mes pasado: 92

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual de CSS 3 : desarrollo web
Desarrollo Web
CSS avanzado: Libros Web.
Javier Eguíluz Pérez
Lista de nuevas propiedades CSS3
www.css3.info
Documentación CSS
mozilla: centro de documentación.
CSS Backgrounds and Borders Module Level 3
W3C Candidate Recommendation 15 February 2011
CSS Text Level 3
W3C Working Draft 1 September 2011
CSS Multi-column Layout Module
W3C Candidate Recommendation 12 April 2011
Flexible Box Layout Module
W3C Working Draft, 23 July 2009
CSS Reference
W3Schools Home
Filtros en Internet Explorer
Visual Filters and Transitions Reference. Microsoft.com
Usando CSS para poner guiones
Roberto Baca: /dd>

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




CSS3 (VI)

Sombras

imagen css3

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 manual de HTML y CSS, página 10.4 Otros trucos ya se ha hablado sobre la posibilidad de poner sombras con el nuevo CSS3 : 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>? ]

Además también podemos poner varias sombras en una misma caja, para ello volveremos a dar los valores para una segunda sombra, los cuales van separados por una coma de los de la primera . Por lo tanto la definición de la propiedad quedará 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.

Todos los navegadores han adaptado ya esta propiedad en su forma estándar desde hace ya algún tiempo, por lo que podemos prescindir de utilizar las formas experimentales. Internet Explorer la incorpora en su versión 9. si bien sigue manteniendo su forma particular de crear sombras mediante filtros. En su versión 10 Internet explorer elimina los filtros para incorporar definitivamente esta forma de crear sombras.


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;
       }


Sombras en Internet Explorer mediante filtros

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

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 8 o anteriores.

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 todos los navegadores en sus últimas versiones. Internet Explorer también la incorpora en su versión 10.


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,






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

Transparencias



Manual de CSS3

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com