I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

preface

Mid-Autumn Festival, the day of reunion, I wish you a happy holiday, good health!

After having the reunion dinner, we are not there is a traditional custom, is to enjoy the moon. In ancient times, people lived in the courtyard, there is no high-rise buildings now, after dinner in the courtyard to sit, talk and admire the moon.

A pot of tea, a family, not unhappy zai ~

But the problem is, nowadays, the pace of our life is too fast, buildings everywhere, few people have the pleasure to calm down to do this thing, it is likely that the night because out to do business, incidentally take a picture, send pyQ, the end of the moon.

But rest assured, who are we? Great programmer ah, we can certainly do, stay at home to enjoy the moon ~

Began to build on

First of all, we will take a black background board as the night sky, put a DIV in it, and then make the moon.

<! DOCTYPEhtml>
<html>
<head>
<title></title>
<style type="text/css">
html.body{
  margin: 0;
  padding: 0;
}
body{
  height: 100vh;
  background-color: black;
}
</style>
</head>
<body>
	<div class="moon" title="This is a moon."></div>
</body>

</html>
Copy the code

The next thing we need to do is styling the div moon, the moon has to be white, it has to be round, so we added these CSS styles, because it’s better centered, so we added styles in the body to center the moon vertically and horizontally.

body{
	display: flex;
  	height: 100vh;
  	justify-content: center;
  	background-color: black;
  	align-items: center;
}
.moon{
  	width: 8em;
  	height: 8em;
  	border-radius: 50%;
  	background-color: white;
}
Copy the code

This is what our moon looks like.

Well, it is the appearance of a moon, but I think this is not enough, how can a moon not shine? Plus! Brilliance here, my idea is to add a white shadow, so that it will look like brilliance against the black.

So far, our Mid-Autumn full moon is finished, the following two moon is not a full moon.

The code is as follows:

html.body{
  margin: 0;
  padding: 0;
}
body{
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  background-color: black;
}
.moon1..moon2{
  width: 8em;
  height: 8em;
  border-radius: 50%;
  background-color: white;
}
.moon1{
  box-shadow: 0 0 40px white;
}
.moon2{
  position: relative;
  box-shadow: 0 0 10px white;
}
.moon2::before{
  content:' ';
  width: 8em;
  height: 8em;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  left: 2em;
  top: 0;
  z-index: 1;
}

.moon3{
  box-sizing: border-box;
  width: 8em;
  height: 8em;
  border-width: 0 0 0 1.5 em;
  border-style: solid;
  border-color: white;
  border-radius: 50%;
}

	<divClass ="moon1" title=" moon1" ></div>
	<divClass ="moon2" title=" the right side of the moon cannot be set to glow "></div>
	<divClass ="moon3" title=" this moon is set by the border, cannot set brightness "></div>
Copy the code

Talk about the moon

The young man with a heart can see that the second and third moons are not realized in the same way. So let’s talk a little bit more about how they did it.

The second moon

We take two pieces of paper, cut them into the same size circle with scissors, overlap them, stagger the position, this shape is what we want. The same goes for CSS. Create a circle of the same size using fake elements, and then cover the right side of the white circle with a black circle (using relative positioning).

I’ll post the code again for your convenience (only the CSS part)

.moon1..moon2{
  width: 8em;
  height: 8em;
  border-radius: 50%;
  background-color: white;
}
.moon2{
  position: relative;
  box-shadow: 0 0 10px white;
}
.moon2::before{
  content:' ';
  width: 8em;
  height: 8em;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  left: 2em;
  top: 0;
  z-index: 1;
}
Copy the code

But the circular side of such a circle has no radiance, because it is formed by obscuring.

The third moon

The third moon we did with a border. Set the width of the left border of the element, and set a rounded corner to make it a curve. Don’t forget to change the color of the border to white.

Note, this can not set brilliance, also known as shadow oh ~

Or, or give it away!

(Add a Boder-shadow to try it, hey hey)

Here is the code for easy observation:

.moon3{
  box-sizing: border-box;
  width: 8em;
  height: 8em;
  border-width: 0 0 0 1.5 em;
  border-style: solid;
  border-color: white;
  border-radius: 50%;
}
Copy the code

The last

Or to wish everyone a happy Mid-Autumn Festival in advance! Moon cakes 🥮🥮🥮🥮🥮, remember to eat a piece, with solar term.