Кошачий CSS Арт. Cat CSS Art

Кошачий CSS Арт

Танцуй так, как будто на тебя никто не смотрит. Пой, как будто тебя никто не слышит. Люби так, как будто тебя никогда не предавали, и живи так, как будто земля — это рай.

В продолжении кошачьего стиля нашёл еще одно решение для оформления сайта при помощи CSS и красивой кошечки.

Для установки скопируйте приведенный ниже код и вставьте его в свой HTML-файл. Всё начинается с создания контейнера div. Контейнер div имеет несколько элементов div, которые используются для создания всех частей тела кошки.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cat CSS Art</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="cat">
        <div class="whiskers"></div>
        <div class="face">
          <div class="ear-l"></div>
          <div class="ear-r"></div>
        </div>
        <div class="tag"></div>
        <div class="tail"></div>
      </div>
    </div>
  </body>
</html>

Далее мы стилизуем нашего кота с помощью CSS. Для этого скопируйте код, предоставленный вам ниже, и вставьте его в свою таблицу стилей.

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #f5b400;
}
.container {
  height: 31.25em;
  width: 31.25em;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.cat {
  background-color: #000000;
  height: 5em;
  width: 12.5em;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  top: 18.75em;
  border-radius: 0 2.18em 0 0;
}
.cat:before {
  content: "";
  position: absolute;
  height: 1.87em;
  width: 1.75em;
  background-color: #000000;
  border-radius: 0 0 1.25em 1.25em;
  bottom: -1.18em;
  box-shadow: 3.75em 0 #000000, 7.18em 0 #000000, 10.75em 0 #000000;
}
.cat:after {
  content: "";
  position: absolute;
  height: 6.25em;
  width: 7.5em;
  background: linear-gradient(#f52d00 1.87em, #000000 1.87em);
  bottom: 4.93em;
}
.face {
  position: absolute;
  background-color: #000000;
  height: 7.5em;
  width: 15em;
  bottom: 11.18em;
  left: -3.62em;
  border-radius: 3.75em;
}
.face:before {
  position: absolute;
  content: "";
  height: 3.75em;
  width: 5em;
  background-color: #ffffff;
  border-radius: 1.87em;
  left: 1.87em;
  top: 1.56em;
  box-shadow: 6.25em 0 #ffffff;
}
.face:after {
  position: absolute;
  content: "";
  height: 2.5em;
  width: 1.56em;
  background-color: #000000;
  top: 2.18em;
  left: 3.56em;
  border-radius: 0.93em;
  box-shadow: 6.25em 0 #000000;
}
.whiskers,
.whiskers:before,
.whiskers:after {
  position: absolute;
  height: 0.62em;
  width: 18.75em;
  background-color: #000000;
  border-radius: 0.31em;
}
.whiskers {
  bottom: 15em;
  left: -5.5em;
}
.whiskers:before {
  position: absolute;
  content: "";
  transform: rotate(14deg);
}
.whiskers:after {
  position: absolute;
  content: "";
  transform: rotate(-14deg);
}
.ear-l {
  height: 0;
  width: 0;
  border-bottom: 3.12em solid #000000;
  border-left: 1.56em solid transparent;
  border-right: 1.56em solid transparent;
  position: absolute;
  bottom: 7.37em;
  left: 3.12em;
}
.ear-l:before,
.ear-r:before {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  border-bottom: 1.37em solid #f52d00;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  left: -0.68em;
  top: 1.56em;
}
.ear-r {
  height: 0;
  width: 0;
  border-bottom: 3.12em solid #000000;
  border-right: 1.56em solid transparent;
  border-left: 1.56em solid transparent;
  position: absolute;
  bottom: 7.37em;
  left: 8.75em;
}
.tag {
  position: absolute;
  height: 1.87em;
  width: 1.87em;
  background-color: #f5b400;
  border-radius: 50%;
  z-index: 1;
  bottom: 7.43em;
  left: 2.81em;
}
.tail {
  width: 3.75em;
  height: 1.25em;
  background-color: #000000;
  position: absolute;
  left: 10.62em;
  top: 1.87em;
}
.tail:before,
.tail:after {
  position: absolute;
  content: "";
  height: 1.87em;
  width: 1.87em;
  border: 1.25em solid #000000;
}
.tail:before {
  border-left: none;
  bottom: 0;
  left: 3.12em;
  border-radius: 0 3.12em 3.12em 0;
}
.tail:after {
  border-right: none;
  bottom: 3.12em;
  left: 1.25em;
  border-radius: 3.12em 0 0 3.12em;
}
@media screen and (min-width: 600px) {
  .container {
    font-size: 1.2em;
  }
}