vp-webdev

6 лет назад

Рисуем логотип 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