CSS Battle: #10 — Cloaked Spirits

В этой статье я решу CSS-задачу Cloaked Spirits на CSS Battle. Сначала давайте рассмотрим проблему.

Проблема

Нам нужно создать следующий контейнер, используя только свойства CSS:

Решение

Теперь посмотрим на решение и на то, как мы этого добьемся.

Код видео немного отличается, потому что в следующем коде CSS я использовал aspect-ratio только для уменьшения символов и для соответствия ширины и высоты, что не упоминается в видео. (Код из видео также работает нормально)

HTML

<p b>
<p c>

CSS

Теперь давайте оформим контейнеры.

* {
  margin: 0;
  background: #62306d;
}
body {
  display: grid;
  place-items: center;
}
p {
  position: fixed;
  aspect-ratio: 1;
}
[b] {
  width: 100;
  background: #f7ec7d;
  box-shadow: -100px 100px #f7ec7d, 
              100px 100px #f7ec7d, 
              0 100px #f7ec7d;
}
[c] {
  width: 60;
  background: #aa445f;
  border-radius: 1in;
  bottom: 170;
  box-shadow: 0 0 0 20px #e38f66, 
              100px 100px #e38f66,
              100px 100px 0 20px #aa445f, 
              -100px 100px #e38f66,
              -100px 100px 0 20px #aa445f;
}

Примечание: В CSS Battle вы можете использовать 100 вместо 100px. Вам не нужно определять px в CSS. Однако, если вы используете rem или %, вам нужно передать их отдельно. Поэтому в приведенном выше коде CSS в основном отсутствуют единицы. Для более подробной информации посетите здесь

Минифицируйте код или CSS с помощью любого CSS Minifier. Это поможет вам уменьшить количество символов в коде, что увеличит оценку.

Минифицированная версия:

<p b><p c><style>*{margin:0;background:#62306D}body{display:grid;place-items:center}p{position:fixed}[b]{height:100;width:100;background:#F7EC7D;bottom:0;left:50;box-shadow:100px -100px #F7EC7D,100px 0 #F7EC7D,200px 0 #F7EC7D}[c]{width:60;height:60;background:#AA445F;border-radius:1in;bottom:170;box-shadow:0 0 0 20px #E38F66,100px 100px #E38F66,100px 100px 0 20px #AA445F,-100px 100px #E38F66,-100px 100px 0 20px #AA445F}

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

Если вам понравилось, не забудьте поставить ❤️. И до встречи в следующей статье. До скорой встречи.