Sombras en texto con CSS

En esta entrada enseñaré cómo agregar distintos tipos de sombras a los textos en Blogger. Es un poco más complicado así que recomiendo que pongas bastante atención.

Sombra simple:

EJEMPLO SOMBRA SIMPLE

Esta sombra no es complicada, veremos la estructura:

text-shadow: 0.1em 0.1em #333

El valor 0.1em, corresponde a la ubicación a la derecha, el valor 0,1em corresponde a la ubicación por debajo del texto y el valor #333 corresponde al color.

Efectos con sombras:

Deberás saber primero cómo trabajan:

Como está escrito en el ejemplo:

text-shadow: 0px 2px 3px #dadada;

• El primer valor (0px) corresponde al eje x (horizontal).
• El segundo valor (2px) corresponde al eje y (vertical).
• El tercer valor (3px) corresponde a la cantidad de blur (efecto borroso) que acompañe a la sombra.
• El último valor (#dadada) corresponde al color de la sombra en formato hexadecimal.

Varios niveles de sombras:

EJEMPLO VARIAS SOMBRAS

Se pueden utilizar varios niveles de sombras de la siguiente forma:

text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;

En donde cada sombra se encuentra a distintas distancias, en este caso se utilizaron 4 niveles distintos de sombras. Estas sombras no contienen el efecto blur (seteado a 0).

Efecto Fuego:

EJEMPLO TEXTO FUEGO

text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

Este efecto se consigue con 7 niveles de sombras, en las que se les asignan un blur, ubicaciones y tamaño distinto a cada una.

• Existen distintas formas de utilizar las sombras, no es complicado, utilicé estos 2 ejemplos sencillos para que entendieran cómo se tratan las sombras. Se pueden conseguir resultados bastante profesionales mezclando sombras, es una alternativa bastante útil para evitar el uso de recursos como logos mediante imágenes.