Hablemos un poco de las sombras en CSS3 – Parte 1

sombras en css3

Cuando hablamos de sombras en CSS3, hablamos de una novedad ya que esto lo conseguíamos anteriormente por medio de imágenes con un efecto o filtro simulando sombras. Ahora en la versión de CSS3 podemos hacer esto posible, solamente añadiendo una simple linea de codigo un poco de estilo al objeto en cuestión y de seguro vamos a conseguir buenos efectos, atractivos que nos pueden mejorar en cualquier momento cualquier diseño, ya sea un bloque o un texto.

Ahora cuando hablamos de sombras en CSS3, hablamos de 2 propiedades box-shadow y text-shadow.

box-shadow: nos permite crear un sombreado todos los elementos HTML (elementos soportados como bloques “Divs”).
text-shadow: nos permite crearle sombras a los textos a los que apliquemos esta propiedad.

Veamos en datalles su funcionamiento:

1 – Box-shadow:

Bueno, en el anterior código estamos aplicando la propiedad box-shadow a un div con un id caja1, y vemos que esta propiedad tiene 4 parametros.

parametro tengo 5px sombra en horizontal o eje x
parametro tengo 5px de sombra en vertical o eje y
parametro tengo 5px de desenfoque, entre mayor sea el numero mas borroso sera el efecto (este es opcional)
es el color que le aplicamos a la sombra que en este caso es #999 que seria mas o menos un gris.

y tendriamos este resultado, te explico graficamente su funcionamiento:

box-shadow-css3

En la actualidad, la mayoría de los navegadores reconocen la propiedad box-shadow . En la práctica, sin embargo, esta propiedad debe tener el prefijo -moz- para Firefox, -webkit- de Webkit para Chrome -ms- y explorer de Microsoft -o- para ópera.

y para las diferentes versiones de navegadores: Ópera (desde su version 10,5), cromo (desde la 10), Safari (desde la 5,0), Firefox (de la version 4) e Internet Explorer (a partir de la version 9). Para dar compatibilidad con los navegadores anteriores como IE Versiones 6,7 y 8 Vamos a utilizar los trucos que ya sabemos. (Ver articulo) .

NOTA: (Para box-shadow tenemos mucho que aprender para crear buenos efectos pero eso lo veremos en otro post).

2 – text-shadow

En cuanto a la propiedad text-shadow , es aún más simple: no es necesario prefijo para los navegadores ya que esta propiedad es independiente del cada navegador, por que es una propiedad que esta terminada y no en (pruebas), veamos un ejemplo.

Bueno es la misma estructura de paramentros que el box-shadow que vimos de primero, asi que no hay mucho que enfatizar en cuanto a esto, de el codigo anterior obtenemos algo como esto:

text-shadow-css3

Ahora, tenga en cuenta que con mas tecnica podemos alcanzar resultados sorprendentes y muy atractivos que podemos aplicar a cualquier texto de nuestra web.

Lo que si te quiero decir es que Estas propiedades no son reconocidos por versiones de Internet Explorer menores de IE9 pero tambien podrian ser simulado utilizando filtros de propiedad o utilizando las tecnicas de compatibilidad.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo