Comunidad de diseño web y desarrollo en internet online

Sombras y efectos en CSS3

En este tema veremos el uso de box-shadow y text-shadow con los que podremos crear sombras y brillos. Además como regalo os dejo una aplicación práctica: Textos 3D.

box-shadow


Hasta ahora aplicar un efecto de sombra a cualquier elemento de nuestro html era un proceso entretenido donde teníamos que cargar imágenes creadas previamente en nuestro programa de edición de imágenes favorito, recortarlas, ajustarlas, etc.

Con el atributo box-shadow podemos aplicar sombras a nuestras capas con pasmosa facilidad. La sintaxis de box-shadow es la siguiente:

Código :

box-shadow: distanciaX distanciaY difuminado color;

Aplicado de la siguiente forma:

Código :

box-shadow: 5px 10px 7px rgba(0,0,0,0.5);

El resultado es el que podéis ver en la siguiente imagen:

Notad que el difuminado se mide de fuera hacia dentro

Si quisiéramos añadir varias sombras, sólo tendríamos que añadir un nuevo valor al atributo usando una coma como separador:


Código :

box-shadow: 5px 10px 7px rgba(0,0,0,0.5), -5px -10px 7px rgba(0,0,0,0.5);


Fácil ¿verdad? Podéis ver el ejemplo aquí.

text-shadow


El atributo text-shadow se incluyó inicialmente en el CSS2 pero fué eliminado en CSS2.1. Por suerte para todos CSS3 vuelve a incluirlo. Seguro que te preguntas en qué se diferencia de box-shadow. Mientras que box-shadow crea sombras a en forma de caja, text-shadow realiza una sombra ajustada a los propios caracteres de un texto. En la siguiente imagen podéis ver la diferencia de los atributos aplicados a textos:

box-shadow se aplica al párrafo como contenedor, no al contenido.

La sintaxis de text-shadow es igual a la de box-shadow:

Código :

text-shadow: distanciaX distanciaY difuminado color;

Para asignar varias sombras usamos la coma como separador. Por ejemplo:

Código :

text-shadow: 5px 10px 7px rgba(0,0,0,0.5), -5px -10px 7px rgba(0,0,0,0.5);

Aquí tenéis la demo.

Brillo

Si queremos crear un resplandor en vez de una sombra, tenemos que darle valor 0 a ambas distancias y aplicar un color claro.

Código :

text-shadow: 0px 0px 20px rgba(0,255,0,1);

Si queremos aumentar la intensidad del brillo, le añadimos más valores de sombra.

Código :

text-shadow: 
0px 0px 20px rgba(0,255,0,1), 
0px 0px 20px rgba(0,255,0,1), 
0px 0px 20px rgba(0,255,0,1);

Textos en 3D con text-shadow

Veamos una aplicación práctica de text-shadow que dará como resultado un efecto distinto a una simple dombra paralela.

Sabemos que podemos aplicar diferentes sombras a un texto, y que podemos decidir que el difuminado de la sombra sea 0. Partiendo de esta base, podemos crear un efecto de pseudo 3D a cualquier texto.

Primero tenemos que aplicar el efecto sombra a nuestro texto. Creamos un texto blanco y una sombra a una distancia x e y de un color gris claro y con difuminado 0:

Código :

text-shadow: 1px 1px 0px rgba(230,230,230,1);

Ahora mismo tiene poco de 3D. Probemos a ir añadiéndole unas cuantas sombras más, aumentando en cada una 1 pixel las distancias x e y y haciendo el gris más oscuro:

Código :

text-shadow:  
1px 1px 0px rgba(230,230,230,1),  
2px 2px 0px rgba(200,200,200,1),  
3px 3px 0px rgba(180,180,180,1),  
4px 4px 0px rgba(160,160,160,1);

Eso ya tiene algo más de aspecto 3D, pero aun le podemos dar un aspecto más realista. Aplicaremos una nueva sombra siguiendo el método anterior, con la diferencia que esta vez le daremos color negro. Por último añadimos una sombra mayor que todas las demás, de color gris claro y con difuminado:

Código :

text-shadow: 
1px 1px 0px rgba(230,230,230,1), 
2px 2px 0px rgba(200,200,200,1), 
3px 3px 0px rgba(180,180,180,1), 
4px 4px 0px rgba(160,160,160,1), 
/*Añadimos*/ 
5px 5px 0px rgba(0,0,0,1), 
8px 8px 20px rgba(0,0,0,0.5);

Esta vez el resultado merece la pena:


Me río yo del VRay, 3DStudio y Papervision

Os dejo este ejemplo con cariño.

En el próximo capítulo abordamos las transformaciones de elementos en CSS3.

 

Información adicional

® Cristalab 2011

Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.