DEV Community 👩‍💻👨‍💻

Monet C
Monet C

Posted on • Updated on

Code Newbie CSS Art pt2

Hello everyone!

Here is a quick tutorial on another static CSS image I created a few weeks ago. I hope to show more CSS images that are responsive soon. But I'm currently learning Node.js and that is taking all my time!Robot CSS image

1) HTML:

<div class="container">
      <div class="robothead">
        <div class="ear"></div>
        <div class="antenna"></div>
        <div class="face">
          <div class="eyes">
            <div class="pupil"></div>
          </div>
          <div class="mouth"></div>
        </div>
      </div>
      <div class="body">
        <div class="neck"></div>
        <div class="torso"></div>
      </div>
</div>
Enter fullscreen mode Exit fullscreen mode

2) CSS:

* {
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #defff9;
}

.container {
  background-color: #f6393c;
  position: relative;
  width: 500px;
  height: 500px;
  top: 40px;
  left: 30px;
  border-radius: 50%;
  overflow: hidden;
}

.robothead {
  background-color: #bbbbbb;
  position: relative;
  width: 50%;
  height: 50%;
  top: 160px;

  border-radius: 20px;
}

.ear {
  background-color: #ff8c00;
  position: absolute;
  width: 30px;
  height: 60px;
  border-radius: 6px;
  top: 80px;
  left: -30px;
}

.ear::after {
  content: "";
  background-color: #ff8c00;
  position: absolute;
  width: 30px;
  height: 60px;
  border-radius: 6px;
  left: 280px;
}

.antenna {
  position: relative;
  background-color: #ff8c00;
  width: 60px;
  height: 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  bottom: 20px;
}

.antenna::before {
  content: "";
  position: absolute;
  background-color: #ff8c00;
  width: 14px;
  height: 20px;
  bottom: 19px;
  left: 23px;
}

.antenna::after {
  content: "";
  position: absolute;
  background-color: #ff8c00;
  width: 30px;
  height: 30px;
  bottom: 37px;
  left: 15px;
  border-radius: 50%;
}

.face {
  position: relative;
  /* border: 1px solid white; */
  width: 200px;
  height: 200px;
}

.eyes {
  position: absolute;
  background-color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  top: 40px;
  left: 8px;
}

.eyes::after {
  content: "";
  position: absolute;
  background-color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  left: 118px;
}

.pupil {
  position: absolute;
  background-color: black;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top: 30px;
  left: 20px;
}

.pupil::after {
  content: "";
  position: absolute;
  background-color: black;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  left: 106px;
  z-index: 1;
}

.mouth {
  position: absolute;
  border-top: 3px solid black;
  width: 150px;
  height: 10px;
  bottom: 30px;
  left: 25px;
}

.body {
  position: relative;
  top: 160px;
}

.neck {
  position: relative;
  width: 20px;
  height: 80px;
  background-color: #bbbbbb;
}

.torso {
  position: relative;
  background-color: #bbbbbb;
  width: 140px;
  height: 70px;
  border-radius: 20px;
  bottom: 50px;
}

.torso::after {
  content: "";
  position: absolute;
  background-color: #ff8c00;
  width: 40px;
  height: 20px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  left: 50px;
}
Enter fullscreen mode Exit fullscreen mode

Live view of the code and image here!

I hope you like this little guy. I thought he was adorable. He's not perfect and I'm still working on my CSS and CSS art skills. 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!

Top comments (0)

All DEV content is created by the community!

Hey, if you're landing here for the first time, you should know that this website is a global community of folks who blog about their experiences to help folks like you out.

Sign up now if you're curious. It's free!