Creating Balls and Stars in CSS and HTML – TubeMint

In this post I am going to show you how to make balls and stars in CSS. Now in this post you will know how to make a balls and stars in HTML and how to style it in CSS. You can make balls and star of many colored in it . We will make six colored balls and star in it.

All you need to know I am going to Creating Balls and Stars in CSS and HTML code and attach a screenshot for visual understanding. I would suggest that you fire up your favorite text editor and web browser and code along with me.

Les’s dive it…..

Ball

In this example, I will show you by making balls in CSS and HTML.

<style>
  .balls{
    border-radius: 50%;
    position: fixed;
    width: 50px;
    height: 50px;
    margin-top: 50px;
   }

  #red {
    background: red;
    left: 40%;

  #blue {
    background: blue;
    left: 45%;
  }

  #black {
    background: black;
    left: 50%;
  }

  #orange {
    background: orange;
    left: 55%;
  }

  #green {
    background: green;
    left: 60%;
  }

  #pink {
    background: pink;
    left: 65%;
  }
  
</style>

<div class="balls" id= "red"></div>
<div class="balls" id= "blue"></div>
<div class="balls" id= "black"></div>
<div class="balls" id= "orange"></div>
<div class="balls" id= "green"></div>
<div class="balls" id= "pink"></div>

The above code should look like this Image below in your preferred browser.

Now we will create SOCCER BALL .

In this code we will create another type ball. You have to place this code ⚽ in place of the ball which is seen in this code.

body {
font-size: 20px;
}
⚽

The above code should look like this Image below in your preferred browser.

Now we will create BASEBALL.

In this code we will create BASEBALL ball. You have to place this code ⚾ in place of the ball which is seen in this code.

body {
  font-size: 20px;
}
</style>

<body>

<span style='font-size:100px;'>⚾</span>


</body>
</html>

The above code should look like this Image below in your preferred browser.

Now we will create Stars .

Star 1

In this example, I will show you by making Star in CSS and HTML. You have to place this code &10036; in place of the star which is seen in this code.


 
<!DOCTYPE html>
<html>
 <style>

 body {
  font-size: 20px;
  color: #558957;
 }
 </style>
  <body>

    <span style='font-size:100px;'>✴</span>

  </body>
</html>

The above code should look like this Image below in your preferred browser.

Star 2

In this example, I will show you by making Star in CSS and HTML. You have to place this code &10029; in place of the star which is seen in this code.

<!DOCTYPE html>
 <html>
   <style>
     body {
     font-size: 20px;
     color: orange;
     }
   </style>
   <body>

     <span style='font-size:100px;'>✭</span>

  </body>
 </html>

The above code should look like this Image below in your preferred browser.

Star 3

IN this code I going show you another star that is slightly different. You have to place this code &10031; in place of the star which is seen in this code.

<!DOCTYPE html>
 <html>
   <style>
   body {
      font-size: 20px;
      color: red;
     }
   </style>
 <body>

  <span style='font-size:100px;'>✯</span>

  </body>
</html>

The above code should look like this Image below in your preferred browser.

Star 4

IN this code I going show you another star that is slightly different. You have to place this code &10032; in place of the star which is seen in this code.

body {
  font-size: 20px;
  color: #67FF36;
}

<span style="font-size:100px">✰</span>

The above code should look like this Image below in your preferred browser.

Contents show