CSS иконка: Android

В этой статье я создам иконку для Android, используя только CSS. Давайте посмотрим, как это сделать.

Содержание

Проблема
Решение
HTML
CSS
Codepen
Подведение итогов

Проблема

Решение

Сначала нам нужно создать структуру для логотипа, а затем стилизовать эту структуру.

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

Войти в полноэкранный режим Выйти из полноэкранного режима

После всего этого наш конечный продукт готов.

Codepen

Подведение итогов

Если у вас есть какие-либо вопросы, не стесняйтесь оставлять комментарии ниже. Это серия статей об иконках CSS, так что следите за новыми статьями. Если вам понравилось, не забудьте поставить ❤️. И до встречи в следующей статье.