CSS Flames

After reading the article about drip conversion to CSS, I decided to play around with the settings in the example code on CodePen and accidentally highlighted moving blocks . It seemed to me beautiful and similar to the burning process. After some deliberation, the code was artificially sawn into pieces, flavored with background transparency, animation and color shadows, and this is what came of it .



The bottom line is simple: we have several transparent blocks with a shadow of the desired color (I called them magnets, because visually they attract the flame to themselves, although formally, just their shadows form it) and a round block from the bottom (let's call it a sphere). Using CSS animation, we make the “magnets” move over the “sphere,” the main thing is to set different rotation times, preferably using numbers for which the NOC will be large enough so that the pattern of movement of the fire does not repeat too often. Approaching and moving away, these blocks contribute to the fact that their shadows are rendered as part of the "sphere", creating a burning effect. And so that the fire does not drift in one direction, the animation of the “magnets” is designed to move clockwise and counterclockwise.

The background of the blocks is set to transparent, and the shadow is rendered only approaching the lower block. As a final touch, a light border-bottom is added to the “sphere” , which, also subject to blurring, imitates a bright base of the flame tongue.

It is interesting that when the background color ( back-color ) is changed to a lighter color , strong distortion occurs in the rendering, and with even greater highlighting, the image disappears altogether. So, it was not possible to make a dark fire. If someone in the comments tells me how to get around this problem, I would greatly appreciate it.

A bit about the parameters, except for the background. The adequacy of the image remains approximately in the following ranges:
  • brightness - from 1.4 to 2.0;
  • contrast - from 8 to 12;
  • blur - from 15 to 22;
  • intensity - from 50% to 90%.

As in the publication that inspired me, I note that this is not for practical use , but only for the sake of experiment. I will be grateful for corrections and additions, for sure this method can be improved. You look, and for practical use it will fit somewhere.

PS At the last check, I noticed that the animation does not work in Firefox, perhaps this CodePen set the prefixes incorrectly when compiling LESS. But, rather, an error in my code, but I can’t find it. I will be glad to help!

Also popular now: