Создание логотипа средствами CSS3

Файл с исходниками тут - https://drive.google.com/open?id=1zjwHPC0AHSsDaJxLqHPKbRrR0v2Xp72j


До недавнего времени дизайн логотипа и графического контента сайта разрабатывался и реализовывался исключительно в графических редакторах, таких как Photoshop или Corel Draw. Ситуация коренным образом изменилась с выходом нового стандарта каскадных таблиц стилей CSS3. Теперь может рисовать, поворачивать, добавлять цветовые эффекты и прозрачность, масштабировать графические элементы непосредственно в браузере, что существенно убыстряет сайт. 


В этой статье мы наглядно покажем, как создать уникальный логотип на CSS, используя только его элементы.




Сразу отметим, что полная поддержка CSS3 реализована не во всех популярных браузерах. Среди браузеров, которые наиболее корректно работают с CSS3 последние версии Firefox, Safari и Chrome. Все приведенные примеры могут не совсем правильно отображаться в Internet Explorer и Opera, поэтому всегда проводите предварительное тестирование.




Используемые элементы CSS3

При отрисовки изображения будем использовать следующие базовые элементы CSS3.


border-radius:

С помощью этого элемента мы будем закруглять угловые элементы нашей пчелы: крылья, голову и другие части логотипа. 




Элемент border-radius имеет два параметра задающие радиусы закругления: первый это горизонтальный, а второй параметр задает вертикальный радиус.


transform:

Этот элемент предназначен для выполнения трансформации экранных элементов – отражение, наклоны, повороты и т.д., но мы будем применять только наклон. Для поворота нижних левого и правого крыла используем transform: rotate(x degrees).




Отрисовка изображения

Наш логотип на CSS будет использовать <DIV> контейнеры и CSS разделы для каждого отдельного элемента: изображения головы, крыльев, хвоста и тела. Подробно структура логотипа смотрим на рисунке:




Создаем голову пчелы. Как уже говорилось выше, будем использовать отдельный элемент <div>. Для изогнутости головы применяем border-radius и итоговый код HTML и CSS имеет следующий вид:




Получаем следующий результат





Создаем тело пчелы. Для отрисовки тела используем следующий код CSS и HTML.




В результате тело нашего логотипа получает следующий вид:





Создаем крылья пчелы. Т.к. дизайн логотипа предусматривает, что нижние крылья у нас повернуты относительно верхних применим элемент transform: rotate().




Смотрим итоговый результат:





Создаем хвост пчелы. На заключительной стадии отрисуем хвост нашей пчелы. Код HTML и CSS для хвоста будет следующий.




Получаем необходимый результат:





Итоговый HTML и CSS код логотипа






Надеемся, что урок был вам полезен и удачных всем логотипов!