10

12

Crear efecto de fuego con Text-shadow

Este efecto que os muestro está totalmente hecho con CSS3 gracias a Text-shadow, que nos permite crear sombras y resplandores a cualquier texto, y en este caso crea un efecto de fuego (también os mostraré otro con efecto de agua) y lo hacemos añadiendo distintas sombras juntas.
Este ejemplo lo he hecho con LESS para tener libertad de cambiar de color y el tamaño del efecto (y obviamente os doy el snippet).

Para crear este efecto lo ideal es tener una letra con un color claro, y preferiblemente blanco, y posteriormente aplicar las sombras teniendo en cuenta que la primera que se aplique tiene que difuminar el texto para que cree el efecto (es decir, que la primera sombra, en este caso, es blanca y difuminada, para que no se noten mucho los bordes del texto).
Si no sabéis como funciona Text-shadow podéis ver el artículo que cree para explicar su funcionamiento y crear efectos 3D.

Crear el resplandor

Como ya os he dicho tenemos que tener lo primero la letra clara, y después añadir los siguientes resplandores como queráis, podéis intercalar distintos colores o hacerla más grande o más pequeña.
Nota: el ejemplo de abajo está creado como os indico ahora, pero el primero está hecho con muchas más sombras, pero de una forma similar.

• Primer resplandor: tiene que servir para difuminar el texto, siendo del mismo color que el.
• Parte de luz: en este tramo podemos añadir un par de resplandores de un color claro (si simulamos el fuego debemos de usar amarillo).
• Subida del fuego: tenemos que crear un par de resplandores que se vayan oscureciendo poco a poco con el color oscuro del efecto (en este caso sería un rojo o naranja intenso).
• Azuleo de la llama: en la punta del fuego de un mechero, por ejemplo, se crea una parte azulada del fuego, que crearemos añadiendo un resplandor transparente de color azul oscuro.

1. /* Primer resplandor */
2. text-shadow: 0px 0px 10px #FFF,

/* Parte de luz */

4px 2px 12px #DCB500,

-4px 2px 12px #DCB500,

/* Subida del fuego */

0px -6px 14px #FF7A00,

0px -12px 14px #FF6300,

0px -20px 14px #FF4400,

/* Azuleo de la llama */

0px -30px 14px #0A7BFF,

Usar mi snippet hecho con LESS

Como ya sabéis LESS es un lenguaje que nos permite "programar" con CSS (o pre-revisar) y para usarlo lo debemos de revisar previamente ya sea instalándolo en nuestro servidor, en una aplicación u online.

Este fragmento de LESS (que podéis copiar) genera este efecto y podemos configurar el color claro (que esta al inicio), el mas oscuro y el del reflejo azulado (por si queremos que sea de otro color), también podemos establecer lo alto que sube la llama, si se inclina hacia los laterales y la borrosidad.
Nota: el fragmento para generar la llama lo tenemos que colocar el mismo documento que añadáis la llamada a el propio fragmento.

1. /* LESS */
2. /* Al usar esta llamada a la función que crea el fuego nos retornará el "text-shadow" */
3. .shadow([Color oscuro], [Color claro], [Desenfoque en px], [Multiplicador de la inclinación], [Multiplicador del alto], [Color del "azuleo"]);
5. /* Fuego */
6. .elemento{

.shadow(#FF2600, #EACC32, 30px, 0, 5, #003DFF);

7. }
9. /* Agua */
10. .elemento{

.shadow(#0008FF, #00E3FF, 30px, 0, 5, #FFF);

11. }