Рисуем логотип Vox Populi на css

В эпоху CSS3 "рисовать" только лишь при помощи стилей достаточно просто. Опытные верстальщики делают просто шедевры.

Я попробовал себя в этом деле, хотя вёрстку я не люблю. В качестве задания выбрал логотип Vox Populi от @yudina-cat
Нарисованный в фотошопе логотип выглядит так:



Далее мы сделаем его без использования картинок.

Нетерпеливым сразу ссылка на jsfiddle

Каждую букву в нём можно представить в виде контейнера div.
Так же у дивов задействуем псевдоэлементы :before и :after
Например буква V - это пустой див, а палочки буквы - это :before и :after. Они имеют ширину и высоту, заливку, закруглённые углы и они повёрнуты.

Код

V

html
<div class="v"></div>
css
.v {
    width: 64px;
    height: 78px;
    display: inline-block;
}
.v:before {
    content: ' ';
    height: 16px;
    width: 81px;
    display: block;
    background: black;
    border-radius: 11px;
    transform: rotate(-70deg);
    position: relative;
    top: 31px;
    right: -4px;
}
.v:after {
    content: ' ';
    height: 16px;
    width: 81px;
    display: block;
    background: black;
    border-radius: 11px;
    transform: rotate(70deg);
    position: relative;
    top: 15px;
    right: 20px;
}

Попробуйте скопировать этот див с css свойствами на свою страницу.
Для наглядности я залью сам див и подкрашу в разные цвета "палочки буквы".


O

html
<div class="o"></div>
css
.o {
    width: 43px;
    height: 43px;
    display: inline-block;
    border-radius: 50%;
    border: 18px solid black;
}

Тут div выглядит как контейнер с рамкой, закруглённой на 50% , и с заданной толщиной.


X

html
<div class="x"></div>
css

.x {
    width: 78px;
    height: 78px;
    display: inline-block;
}
.x:before {
    content: ' ';
    height: 16px;
    width: 102px;
    display: block;
    background: black;
    border-radius: 11px;
    transform: rotate(45deg);
    position: relative;
    top: 31px;
    right: 11px;
}
.x:after {
    content: ' ';
    height: 16px;
    width: 102px;
    display: block;
    background: black;
    border-radius: 11px;
    transform: rotate(-45deg);
    position: relative;
    top: 15px;
    right: 12px;
}

Принцип как и у буквы V, просто before и after смещены.

P

html
<div class="p"></div>
css
.p {
    width: 22px;
    height: 26px;
    display: inline-block;
    border-left: 2px solid black;
}
.p:before {
    content: ' ';
    width: 14px;
    height: 10px;
    display: block;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

С буквой P попроще. "Палочка" - это левая граница дива, а "закруглённая" - это before с верхней, правой и нижней границами.
"Цветастый" рисунок


O

html
<div class="O"></div>
css
.O {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 8px;
    border-radius: 50%;
    border: 3px solid black;
}

Маленькач o по аналогии с большой, только цифры другие.


U

html
<div class="u"></div>
css
.u {
    width: 17px;
    height: 24px;
    display: inline-block;
    margin-right: 11px;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    border-bottom-right-radius: 40%;
    border-bottom-left-radius: 40%;
}

Для буквы U задействуем границы дива по бокам и снизу+закругление. Тут всё просто.


L

html
<div class="l"></div>
css
.l {
    width: 17px;
    height: 24px;
    display: inline-block;
    margin-right: 11px;
    border-left: 2px solid black;
    border-bottom: 2px solid black;
}

В букве L подкрашены только левая и нижняя границы, даже без закругления.


i

html
<div class="i"></div>
css
.i {
    width: 7px;
    height: 26px;
    display: inline-block;
    border-left: 2px solid black;
}

И в i только левая граница дива.


Каждый div имеет свойство display: inline-block;, то есть обладает как блочными, так и строчными свойствами.
Чтобы "отделить" второе слово от первого - я обернул его в div.

Ну и собственно результат

Вверху - CSS
Внизу - PNG

При желании можно подогнать пиксель-в-пиксель.

Зачем вообще это надо? Ну как минимум - для загрузки логотипа пользователю не придётся загружать файл с логотипом. Несколько десятков строк на css(файл с которыми всё равно загружается и кэшируется) весят ничто по сравнению с файлом изображения.

Проверить на jsfiddle
Посмотреть на сайте - внизу изображение, для наглядности, в верху на css.

Заглавное фото с сайта demacmedia.com

vox-populihtmlcssрисуноккакэтосделано
195
153.727 GOLOS
0
В избранное
Web Development
Тех, кто презирает программистов, программисты презирают сильнее, чем те, кто презирает тех программистов, которые презирают тех, кто их презирает.
195
0

Зарегистрируйтесь, чтобы проголосовать за пост или написать комментарий

Авторы получают вознаграждение, когда пользователи голосуют за их посты. Голосующие читатели также получают вознаграждение за свои голоса.

Зарегистрироваться
Комментарии (3)
Сортировать по:
Сначала старые