Флаг С.Ш.А. интересен тем, что при его отрисовки можно использовать Repeating Gradient, отрисовка звёздочек через Content и всё это одним дивом.
Для начала надо отметить, что большую часть размеров пришлось подбирать "на глаз". С адаптацией я буду разбираться позже. Сейчас меня интересует только отрисовка элементов.
Зададим размеры будущего флага:
.us-flag {
position: relative;
height: 400px; width: 760px;
border: solid 1px #000000;
}
Так-же добавим Repeating Gradient для фона (полосочки):
background: repeating-linear-gradient(#B22234 0% 7.69%, white 7.69% 15.38%);
Рисуется красная и белая полоса нужной толщины. Затем они просто повторяются пока не закончится отведённый под них блок.
Затем я добавил синий блок:
.us-flag::before {
position: absolute;
display: block;
content: "";
height: 53.85%; width: 40%; background: #3C3B6E;
}
Да, можно было на него налепить звёзды и обойтись только одним псевдо элементом... но, мне было проще добавить еще один элемент.
Рисуем звёзды:
.us-flag::after {
position: absolute; display: block;
height: 53.85%; width: 40%;
text-align: center;
font-size: 33px; color: white;
content: "★★★★★★ ★★★★★ ★★★★★★ ★★★★★ ★★★★★★ ★★★★★ ★★★★★★ ★★★★★ ★★★★★★";
letter-spacing: 22px; line-height: 21px;
padding: 13px 0 0 9px;
}
- Задаём размеры блока под звёзды
- "Прописываем" сами звёзды. Перенос строки осуществляется на пробелах
- Задаём расстояния между звёзд. Letter Spacing - по горизонтали, Line Height - по вертикали
- Ну и паддинги что-бы всё было "ровно"
Полный CSS код:
See the Pen US Flag by Sergey Zlomorda Drushchits (@Zlomorda) on CodePen.
Всем удачи!!
Комментариев нет:
Отправить комментарий