CSS - Флаг Соединённых Штатов Америки



Флаг С.Ш.А. интересен тем, что при его отрисовки можно использовать 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.


Всем удачи!!

Комментариев нет:

Отправка комментария