CSS 아이콘: Android

이 글에서는 CSS만을 이용하여 안드로이드 아이콘을 만들어 보겠습니다. 어떻게 하는지 살펴보겠습니다.

문제

해결책

먼저 이 로고의 구조를 만든 다음 해당 구조의 스타일을 지정합니다.

HTML

<div class="wrapper">
  <div class="head"></div>
  <div class="center-square"></div>
  <div class="left-hand"></div>
  <div class="right-hand"></div>
  <div class="left-foot"></div>
  <div class="right-foot"></div>
  <div class="eye-left"></div>
  <div class="eye-right"></div>
  <div class="left-ear"></div>
  <div class="right-ear"></div>
</div>

여기에는 외부 컨테이너.wrapper가 있으며 여기에는 로고의 여러 부분이 포함되어 있습니다.

CSS

먼저 .wrapper 및 .center-square 스타일을 지정해 보겠습니다.

.wrapper {
  --bg: #222;
  --clr: #aac148;
  position: relative;
}
.center-square {
  width: 140px;
  height: 115px;
  border-radius: 5px;
  transform: translatey(16px);
  background: var(--clr);
}

이제 left-hand , right-hand , left-foot 및 right-foot 스타일을 지정해 보겠습니다.

.left-hand,
.right-hand,
.left-foot,
.right-foot {
  position: absolute;
  height: 95px;
  width: 30px;
  background: var(--clr);
  border-radius: 100px;
}

.left-hand {
  top: 0;
  left: 0;
  transform: translate(-37px, 16px);
}

.right-hand {
  top: 0;
  right: 0;
  transform: translate(37px, 16px);
}

.left-foot {
  left: 28px;
  margin-top: -25px;
}

.right-foot {
  margin-top: -25px;
  right: 28px;
}

이제 head 및 eyes를 추가합니다.

.head {
  position: absolute;
  width: 100%;
  height: 70px;
  background: var(--clr);
  transform: translatey(-60px);
  border-radius: 100px 100px 5px 5px;
}

.eye-left,
.eye-right {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: var(--bg);
  top: 0;
}

.eye-left {
  transform: translate(32px, -28px);
}
.eye-right {
  right: 0;
  transform: translate(-32px, -28px);
}

이제 마지막으로 추가해야 할 것은 귀입니다.

.left-ear,
.right-ear {
  position: absolute;
  width: 6px;
  height: 50px;
  border-radius: 100px;
  background: var(--clr);
  top: 0;
}

.left-ear {
  transform: translate(34px, -78px) rotate(-30deg);
}

.right-ear {
  right: 0;
  transform: translate(-34px, -78px) rotate(30deg);
}

이 모든 작업이 끝나면 이제 최종 제품이 준비되었습니다.

코데펜

마무리

질문이 있으시면 아래에 의견을 남겨주십시오. 이것은 일련의 CSS 아이콘이므로 더 많은 기사를 보려면 팔로우하십시오. 당신이 이것을 좋아한다면 그것을 ❤️하는 것을 잊지 마십시오. 그리고 다음편에서 뵙겠습니다.