Code Newbie CSS Art pt.3

#css #html #beginners #100daysofcode

It's been soooo long! Happy New Year and I hope you all are staying safe! My goal is to bring you more CSS Art tutorials and other blog posts this year, on a regular schedule.

2) HTML

<div class="head">
  <div class="l-eye"></div>
  <div class="r-eye"></div>
  <div class="mouth">
    <div class="l-teeth"></div>
    <div class="r-teeth"></div>
  </div>
</div>

3) CSS

.head {
  background-color: yellow;
  width: 500px;
  height: 500px;
  position: relative;
  border-radius: 50%;
  left: 25%;
  top: 80px;
}

.l-eye {
  position: absolute;
  background-color: black;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top: 100px;
  left: 20%;
}

.r-eye {
  position: absolute;
  background-color: black;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top: 100px;
  right: 20%;
}

.mouth {
  position: absolute;
  background-color: black;
  width: 200px;
  height: 100px;
  top: 300px;
  left: 30%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

.l-teeth {
  position: absolute;
  background-color: white;
  width: 40px;
  height: 30px;
  left: 29%;
}

.r-teeth {
  position: absolute;
  background-color: white;
  width: 40px;
  height: 30px;
  right: 29%;
}

Live view of the code and image here

I hope you like this silly little face. It's been a while since I created any CSS Art so it's pretty simple, but I like him. The next few images will be even better! I want to build up to creating single-div CSS images. Please share resources and links to your own CSS art.

In my previous post, I share lots of resources for getting started in CSS art check it out here!