a cool full css blaze effect, cutsomizable through a html page
css-blaze is a css trick that emulate a fire over an html element. You should definitively try it, it's pretty cool.
Simply paste the css code in your style sheet and add the class name to your element. The element is now burning and your website is 83% cooler.
Pink may not be your favorite color? Nevermind I wrote a generator where you can custom some stuff to make it looks like you want to.
Did you see the dat.gui panel? Unfold it and have fun playing with the options.
I also made a function that generate colors that look good together, and I made it just for you.
Past it in your style sheet
You may notice that the css in pretty heavy. I have to prefix all the properties as there are not yet standards. You can reduce drastically the weight by using less colors and less keyframes.
To achieve this effect, I use some css shadow property and animate them with key frame animation.
The shadow params values oscillate following a random pattern to looks chaotic and make a realistic fire effect.
The box-shadox property does not offer a convincing render. We need more asperities on the element to figure the flame.
That's why I use :before pseudo class to insert content on top of the element. A chain of characters "xlxlxxxll" do the job pretty well. It's this chain that we animate with text-shadow property.
Just me, @Platane. If you like my work, there is some more over there arthur-brongniart.fr