Pure CSS implementation: Let's draw a street lamp from 0 to 1

This is the 26th day of my participation in Gwen Challenge

preface

Today is the weekend, but I have to stay up late into the night. Why? Just as hard to fix as procrastination is your bank balance.

Today I saw a PS tutorial to teach street lamp effect, I want to make a CSS version of the street lamp effect to see, without further words, let’s follow the article to do it again

process

First of all, I had to make a street lamp. Naturally, I had to analyze the structure of the street lamp. I drew a sketch (true — scrawl) :

In simple terms, street lamps should have a top cover, four brackets, a base, a pole and a luminous wick. So there are five parts,

First of all, I put up the structure of the street lamp for a look. For the color, I chose a small and fresh blue-green color. The layout was mainly fixed by positioning, hoping that the lamp holder would have a three-dimensional feeling, so LINEAR-gradient adjustment was added, and the rotate attribute of the support was used, with no other profound codes. Post the code directly as follows:

    <style>
        .box{
            width: 800px;
            height: 800px;
            margin: 200px auto;
            position: relative;
            background-color: # 000;
        }
        .box div{
            position: absolute;
        }

        .top-box {
            width: 140px;
            height: 60px;
            top: 120px;
            left: 270px;
            background: linear-gradient(120deg.#b0ffc4 0%.#7bfda2 40%.#93fdbc 60%.#a0ffc8 67%.#95ffe4 100%);
            border-radius: 20% 20% 100% 100% / 50% 50% 10% 10%;
        }

        .base-box{
            width: 70px;
            height: 10px;
            top: 290px;
            left: 307px;
            background: linear-gradient(90deg.#b0ffc4 0%.#7bfda2 30%.#93fdbc 50%.#95ffe4 100%);
            border-radius: 50% 50% 10% 10% / 20% 20% 100% 100%;
            box-shadow: 0 5px 5px black;
        }
        .column{
            top: 178px;
            width: 3px;
            height: 115px;
            background: rgb(148.255.196);
        }
        .col1{
            left: 292px;
            transform: rotate(-15deg);
        }
        .col2{
            left: 312px;
            transform: rotate(-10deg);
        }
        .col3{
            left: 368px;
            transform: rotate(10deg);
        }
        .col4{
            left: 388px;
            transform: rotate(15deg);
        }
        .pole{
            width: 10px;
            height: 360px;
            top: 300px;
            left: 337px;
            background: linear-gradient(90deg.#b0ffc4 0%.#7bfda2 30%.#93fdbc 50%.#95ffe4 100%);
        }
    </style>



    <div class="box">
        <! -- Top cover -->
        <div class="top-box"></div>
        <! -- 4 supports -->
        <div class="column col1"></div>
        <div class="column col2"></div>
        <div class="column col3"></div>
        <div class="column col4"></div>
        <! - the wick -- -- >
        <div class="light"></div>
        <! - base -- -- >
        <div class="base-box"></div>
        <! - pole - >
        <div class="pole"></div>
    </div>
Copy the code

The realization effect is shown as follows:

Does it look a little like a sketch? The next step is to add the wick.

To make a suitable wick, we must consider the structure of the lamp, the middle of the lamp is the brightest, there should be a luminous origin white, and then gradually diffused around, at the same time behind the lamp should also have a support of the shadow just more real. Therefore, after considering these, I decided to divide the wick into two parts, left and right. Keeping a certain distance in the middle can well simulate the shadow of the middle bracket. Meanwhile, adding a white circle in the middle for continuous contraction animation can simulate the lighting effect.

Instead of using box-shadow simulation, the filter attribute is used for the lighting effect, mainly because the filter attribute can better adjust the blur and even saturation. After some adjustments, the code looks like this:

    <style>
        .box{
            width: 800px;
            height: 800px;
            margin: 200px auto;
            position: relative;
            background-color: # 000;
        }
        .box div{
            position: absolute;
        }

        .top-box {
            width: 140px;
            height: 60px;
            top: 120px;
            left: 270px;
            background: linear-gradient(120deg.#b0ffc4 0%.#7bfda2 40%.#93fdbc 60%.#a0ffc8 67%.#95ffe4 100%);
            border-radius: 20% 20% 100% 100% / 50% 50% 10% 10%;
        }

        .base-box{
            width: 70px;
            height: 10px;
            top: 290px;
            left: 307px;
            background: linear-gradient(90deg.#b0ffc4 0%.#7bfda2 30%.#93fdbc 50%.#95ffe4 100%);
            border-radius: 50% 50% 10% 10% / 20% 20% 100% 100%;
            box-shadow: 0 5px 5px black;
        }
        .column{
            top: 178px;
            width: 3px;
            height: 115px;
            background: rgb(148.255.196);
        }
        .col1{
            left: 292px;
            transform: rotate(-15deg);
        }
        .col2{
            left: 312px;
            transform: rotate(-10deg);
        }
        .col3{
            left: 368px;
            transform: rotate(10deg);
        }
        .col4{
            left: 388px;
            transform: rotate(15deg);
        }
        .pole{
            width: 10px;
            height: 360px;
            top: 300px;
            left: 337px;
            background: linear-gradient(90deg.#b0ffc4 0%.#7bfda2 30%.#93fdbc 50%.#95ffe4 100%);
        }
        .light{
            top: 175px;
            left: 246px;
            width: 190px;
            height: 110px;
        }
        .light span{
            float: left;
            width: 95px;
            height: 120px;
        }
        .light .wick{
            width: 30px;
            height: 30px;
            position: absolute;
            top: 45px;
            left: 78px;
            border-radius: 50%;
            background: rgba(255.255.255.0.5);
            animation: glow 5s linear infinite;
        }
        .light .left{
            bottom: 598px;
            left: 155px;
            background: #f1ff00;
            background: linear-gradient(255deg.#f1ff00 0%.#f5ff00 50%.rgba(168.168.168.0) 50%.rgba(94.94.94.0) 100%);
            filter: blur(2px) drop-shadow(0 0 15px #ffff00);
            animation: light-glow 5s linear infinite alternate;
        }
        .light .right{
            bottom: 598px;
            left: 250px;
            background: #f1ff00;
            background: linear-gradient(105deg.#f1ff00 0%.#f5ff00 50%.rgba(168.168.168.0) 50%.rgba(94.94.94.0) 100%);
            filter: blur(2px) drop-shadow(0 0 15px ffff00);
            animation: light-glow 5s linear infinite alternate;
        }
        @keyframes light-glow {
            0% {
                filter: blur(2px) drop-shadow(0 0 15px #ffff00);
            }
            100% {
                filter: blur(5px) drop-shadow(0 0 30px #ffff00); }}@keyframes glow {
            0% {
                transform: scale(0.8);
            }
            100% {
                transform: scale(1); }}</style>



    <div class="box">
        <! - the wick -- -- >
        <div class="light">
            <span class="left"></span>
            <span class="right"></span>
            <span class="wick"></span>
        </div>
        <! -- Top cover -->
        <div class="top-box"></div>
        <! -- 4 supports -->
        <div class="column col1"></div>
        <div class="column col2"></div>
        <div class="column col3"></div>
        <div class="column col4"></div>
        <! - base -- -- >
        <div class="base-box"></div>
        <! - pole - >
        <div class="pole"></div>
    </div>
Copy the code

The realization effect is shown as follows:

The reason why the position of the wick element is adjusted to the top is that it needs to be covered by the following elements, that is to say, in absolute positioning, the following elements will be stacked on top of the previous elements. Adjusting the order of elements can avoid the situation that the wick covers the main body of the street lamp.

Of course, the three-dimensional light pole can be fine-tuned, and the white wick in the middle can be optimized. If you are interested, you can continue to study oh ~

Afterword.

Hope big ice today to share the content can help you, make the street lamp effect and write the text almost two hours, looks simple but the adjustment is still very troublesome, just like usually write a page, CSS style always occupy a lot of time, but after the completion of the sense of accomplishment. There’s something satisfying about having a little idea, simple or complex, and starting it right away.

Today is the twenty-sixth day I adhere to the day more, a little output every day, a little progress. Day arch a pawn, work does not donate tang. Everybody refuels together ~

If this article has helped you, don’t keep it a secret! For example, click “like”, follow Big Ice cube, and learn more interesting technology blogs with Big Ice Cube

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Pure CSS implementation: Let’s draw a street lamp from 0 to 1

preface

process

Afterword.

More challenging articles are listed below:

Pure CSS implementation: Let’s draw a street lamp from 0 to 1

preface

process

Afterword.

More challenging articles are listed below:

Related Posts

The various ways in which JavaScript extends inheritance and the pros and cons

Es5-es6 Penetrates deep and shallow copies of objects

Publish your own NPM package from scratch