여러분, 안녕하세요!

다음은 몇 주 전에 만든 또 다른 정적 CSS 이미지에 대한 빠른 자습서입니다. 반응형 CSS 이미지를 더 많이 보여드리고 싶습니다. 하지만 저는 현재 Node.js를 배우고 있는데 시간이 많이 걸립니다!

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>

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;
}

코드와 이미지의 라이브 뷰는 여기!

나는 당신이 이 작은 녀석을 좋아하기를 바랍니다. 나는 그가 사랑스럽다고 생각했다. 그는 완벽하지 않으며 저는 여전히 CSS 및 CSS 아트 기술을 연구하고 있습니다. 다음 몇 장의 이미지는 더 나아질 것입니다. 단일 div CSS 이미지를 만들기 위해 구축하고 싶습니다. 자신의 CSS 아트에 대한 리소스와 링크를 공유하십시오.

이전 게시물에서 CSS 아트를 시작하기 위한 많은 리소스를 공유했습니다. 확인해보세요!