New Year at home, too much time to try to write an article. Please point out any mistakes, thank you.

Simulation of photosynthetic efficiency

What kind of light does not explain (do not know how to explain -!) Simulation, of course, because you can’t make objects that glow naturally. So how do you simulate it? Take a look at the graph below:

Because of the contrast between light and dark, objects with high brightness will give us a luminous effect visually. Let’s try implementing a demo with code:

The implementation is complete, but the effect is not right, is there something missing from the comparison with the above picture?

Never mind, let’s look at another picture:

The light in this picture is the Dundar effect, which is a scattering of light and is often used to create a hazy beauty on pictures. This scattering actually helps us visualize the light, that is, enhances the light effect. If you look at the above two figures, you’ll see that what you just implemented in code seems to lack the scattering effect. So how do you achieve this effect? Of course it is shadow, there may be other styles can also be simulated, but this time it is the protagonist!

What is a shadow?

Shadow: box-shadow, text-shadow, text-shadow, text-shadow, text-shadow

Here are two features:

  1. I can write a lot of values

.box {
    position: absolute;
    top: 200px;
    left: 200px;
    width: 200px;
    height: 200px;
    background: #000;
    box-shadow:
        10px 10px 0 #e5e12c,
        20px 20px 0 #70c5e5,
        30px 30px 0 #e24fe5;
}
Copy the code
  1. Support for tween animation

And then shadow the demo

width: 200px;
    height: 200px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 80px;
    left: 80px;
    box-shadow: 
        5px 5px 10px #eee, 
        -5px 5px 10px #eee, 
        5px -5px 10px #eee, 
        -5px -5px 10px #eee, 
        5px 5px 30px #aaa, 
        -5px 5px 30px #aaa, 
        5px -5px 30px #aaa, 
        -5px -5px 30px #aaa;
Copy the code

The first group has a shorter blur distance (10px) and is slightly brighter than the second group. It is also close to the central circle and slightly dimmer than the central circle, so that the middle circle is visually brighter. Together, the two groups simulate the effect of the light fading. Of course, you can set more groups for better results.

It’s even brighter than the first one. And with box-shadow, it’s a bit insidious.

summary

This is just a way to simulate light effects in CSS. With light effects, we can use our imagination to achieve more fun and cool effects with CSS, such as using text-shadow to achieve neon text:

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    font-size: 100px;
    color: #fff;
    letter-spacing: 10px;
    text-shadow: 
        0 0 1px #ad6aea, 
        1px 0 2px #ad6aea, 
        -1px 0 2px #ad6aea, 
        1px 0 5px #ad6aea, 
        -1px 0 10px #ad6aea;
Copy the code

Then add some other special effects to make it:

Hey hey, I wish everyone a happy New Year! Demo2 address

The following is implemented with box-shadow:

Demo3 address

Tips: The last two demos use a lot of CSS3 animations, which should look pretty sticky on the phone!

All Demo addresses