This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Hi, I’m Banxia 👴, a sand sculptor who has just started writing. If you like my article, you can follow ➕, like 👍 and add me on wechat: FrontendPicker. We invite you to join us to learn the frontend of communication and become better engineers. Click me to explore a new world!

preface

As a “small fisherman” in the seaside, besides seafood, the most I see is the blue sky and white clouds. I have to say, from the beach, the blue sky and white clouds, it just feels clearer. In recent years, the city haze is not serious, but the blue sky and white clouds are not so bright ah. Miss ah!! I’ve been coding for years, but I haven’t drawn clouds yet.

Blue background

body {
  margin: 0;
  padding:0;
  width: 100%;
  display: block;
  min-height: 100vh;
  background-color: deepskyblue;
}
Copy the code

The drawing of clouds 1

The first way is to use div concatenation.

The end result:

Implementation logic. Define the body of the cloud, and then add the cloud. Break it into three pieces and use the overlay effect to create a cloud. Here’s my breakdown.

The body of the cloud

A rounded div, used primarily as a theme, with the other two circles on top.

.cloud {
  width: 200px;
  height: 60px;
  background: #fff;
  border-radius: 200px;
  position: relative;
}
Copy the code

The front of the cloud

A 30-degree rounded two-point DIV, the purple part above, serves primarily as the front half of the cloud, passing through the subject above.

.cloud:before {
    content: "";
    position: absolute;
    background: #fff;
    width: 100px;
    height: 80px;
    position: absolute;
    top: -15px;
    left: 10px;
    border-radius: 100px;
    transform: rotate(30deg);
  }
Copy the code

The effect that is finally linked to the main body:

Behind the clouds

It looks like a circle from the breakdown.

.cloud:after {
  content: "";
  position: absolute;
  background: #fff;
  width: 120px;
  height: 120px;
  top: -55px;
  left: auto;
  right: 15px;
  border-radius: 100px;
}
Copy the code

The final synthetic effect

Cloud painting ii

The second method is mainly implemented using shadows.

The end result looks like this: clouds with a flat bottom.

This is just a div with a shadow around it. But the shadow is round and part of it is transparent.

Defines the body

    <div class="cloud"></div>

Copy the code
      .cloud {
        position: absolute;
        width: 60px;
        height: 60px;
        background: #fff;
        border-radius: 50%;
 
      }
Copy the code

Here we define a circular div. The circular div is defined to ensure that the shadow is round.

Combined with the clouds

A cloud is basically a circle with a shadow around it. Here you just need to add a shadow on top and left. At the same time, in order to have some white space between the shadows, we need to offset.

 box-shadow: -35px 10px 0 -10px,
          33px 15px 0 -15px, 0 0 0 6px #fff,
          -35px 10px 0 -5px #fff,
          33px 15px 0 -10px #fff;
Copy the code

Set the round div to the same color as the background, which we use here

background: currentColor; Set the background color. CurrentColor is a variable in CSS. It represents the inherited color of the current label. Interested can see Zhang Xinxu big man’s blog.

At the bottom of the screeding

It looks like a lot of trouble to flatten the bottom, but it’s actually the easiest. Just put a layer on top of it. The div override is similar to scenario 1. Instead of using a new div, use :after or brfore. The original plan was to set after to white, then adjust the height and overlay, but the effect was not very good, there would always be a right Angle highlight, and the shadow was changed behind.

    .cloud:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: -10px;
        display: block;
        width: 75px;
        height: 10px;
        background: #fff;
      }
Copy the code

The code above has not shaded and set the after color to white.

I’m going to use the currentColor again.

  .cloud:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: -10px;
        display: block;
        width: 75px;
        height: 10px;
        background:currentColor;
        box-shadow: 0 6px 0 -1px #fff;
      }
Copy the code