100% Испытание: щит Завтрамэна [31\31] Апрель 2020

Курсы §24. Мастерская: декоративные эффекты. Часть 2
1

Мне показалось, что у некоторых могут возникнут проблемы с пониманием процесса создания, потому что стили нелогично располагаются в коде: не в том порядке, в котором они бы реально создавались.

Сделал немного понятнее и добавил комментарии. Можешь поудалять отдельные блоки под цифрами в CSS и посмотреть, как оно рисуется)

Если тебе просто скопировать, то удали background и height у shield-logo

body {
  margin: 0;
  padding: 0;
  width: 570px;
  background-color: #f5f5f5;
  color: #333333;
}

main {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 300px;
  height: 300px;
}

/*1. Делаем первый белый слой*/
.shield { 
  position: relative;
  top: 5%;
  margin: 0 auto;
  width: 90%;
  height: 90%;
  background-color: #ffffff;
  box-shadow: 0 2px 3px #cccccc;
}

/*2. Создаём 2 псевдоэллемента для следующих 2-х слоёв и центруем*/
.shield::before,
.shield::after { 
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

/*3. Создаём синий слой, но меньше, поверх белого*/
.shield::before { 
  width: 75%;
  height: 75%;
  background-color: #0039a6;
}

/*4. Создаём расный ещё меньше поверх всех*/
.shield::after { 
  width: 50%;
  height: 50%;
  background-color: #d52b1e;
}

/*5. Делаем все эллементы круглыми*/
.shield,
.shield::before,
.shield::after { 
  border-radius: 50%;
}

/*6. Позиционируем блок, в которым будет логотип. Background и height потом удалим: они для наглядности*/
.shield-logo {
  position: relative;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 82px;
  height: 41px;
  transform: translate(-41px, -20px);
  background-color: black;
}

/*7. Задаём стили 2 псевдоэллементов. Они сейчас наложены друг на друга*/
.shield-logo::before,
.shield-logo::after  {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 10px solid #ffffff;
  border-radius: 50% 50% 0;
  content: "";
  transform: rotate(-45deg);
}

/*8. Отражаем второй псевдоэллемент в противоположную сторону*/
.shield-logo::after {
  right: 0;
  left: auto;
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
}

/*9. Удаляем background и height у shield-logo*/
5 лайков
2

Согласна. То, в каком порядке идут / разбиты селекторы в css - сбивает. Спасибо.

3

Вроде получилось, но надо досконально разобрать процесс. Буду изучать твой код , спасибо.
И кстати, последний псевдоэлемент у .shield-logo можно не трансформировать, а просто прописать border-radius:0 50% 50%.

1 лайк
4

13/12/2022 - 100%.

.shield {
  position: relative;
  top: 5%;
  margin: 0 auto;
  width: 90%;
  height: 90%;
  background-color: #ffffff;
  box-shadow: 0 2px 3px #cccccc;
}

.shield,
.shield::before,
.shield::after {
  border-radius: 50%;
}

.shield::before {
  width: 75%;
  height: 75%;
  background-color: #0039a6;
}

.shield::after {
  width: 50%;
  height: 50%;
  background-color: #d52b1e;
}

.shield::before,
.shield:after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.shield-logo {
  position: relative;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 82px;
  transform: translate(-41px, -20px);
}

.shield-logo::before,
.shield-logo::after{
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 10px solid #ffffff;
  border-radius: 50% 50% 0;
  content: "";
  transform: rotate(-45deg);
}

.shield-logo::after {
  right: 0;
  left: auto;
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
}