2 CSS Moon Drowning Techniques

Imagine the moon in the night sky, quite romantic, right? Small visual effects like moon, star, cloud sometimes help to enhance the beauty of a website. Even a simple page can be given a completely different feel by adding a little effect.

Creating such effects using CSS is actually not very difficult. Rather, creating moon, star using CSS is as easy as drawing on a notebook. So today we will discuss easy methods to create moon using which you can show moon animation on your webpage.

Before starting the tutorial, I want to tell you that this type of CSS art is not used anywhere in reality or can also be used on the loading page of a website. I have made this tutorial here to have fun with CSS properties with you. So let's explore some new aspects of CSS properties.

Half Moon using CSS Box-Shadow:

HTML:

Creating a Half moon is very easy, you can do it by just using a div element. So we will create an html div element with the class name "half-moon". Nothing else needs to be done in the html.

<div class="half-moon"></div>

Stylesheet (CSS):

setup the body

At the beginning of the CSS code, we will do some basic setup of the document body before applying the Half moon styling. For example, we will use the transform method to place the moon in the middle of the document body. The position, top, left, transform css properties are used for cantering. The color of the night sky is black, but my purpose is to show you the shape of the moon, so I made the background color of the body yellow (hex code #ffd30a).

body{
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%,-50%);
  background: #ffd30a;
}

styling the herf moon

Next, we will style the moon, so we have set the size of the element with the class name "half-moon" to 200x200px. To make the moon completely round, we will set the value of the border-radius css property to 50%. Now, we will make its background completely transparent, which will make this element invisible.

We need to do the main thing, which is to create the half moon effect using the inset box-shadow css property. We will set the box-shadow value to inset 30px -15px 0px 13px #000. This will create an inner shadow inside the circle. The shadow is offset by 30px to the right and 15px to the top, with no blur (0px blur radius) and no spread of 13 pixels. The color of this shadow will be solid black (hex code #000).

.half-moon {
  background: transparent;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: inset 30px -15px 0px 13px #000;
}

Full Moon using CSS:

HTML:

First we'll create a container with the HTML class moon, and inside it a list of 3 empty list items. It is designed so that the moon acts as the main circular element, while the three li elements are used as holes.

<div class="moon">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

Stylesheet (CSS):

setup the body

We have set up the document body while creating Half Moon, we have done the same thing here. We just set the background color to black.

body{
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%,-50%);
  background: #222;
}

styling the moon

.moon {
  background: #ffd30a;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: inset -25px 0px 0 0px #41404352;
}

styling the moon hole

li {
    position: absolute;
    list-style: none;
    background: #737277;
    border-radius: 50%;
}

li:nth-child(1) {
  left: 80px;
  top: 35px;
  width: 50px;
  height: 50px;
  box-shadow: inset 5px -2px 0 0px #414043;
}
li:nth-child(2) {
left: 45px;
    top: 115px;
    width: 35px;
    height: 35px;
    box-shadow: inset 5px -2px 0 0px #414043;
}

li:nth-child(3) {
  left: 135px;
  top: 127px;
  width: 40px;
  height: 40px;
  box-shadow: inset 5px -2px 0 0px #414043;
}