Выходные подкрались незаметно. В плохую погоду я немного заскучал и решил потренироваться в старом добром CSS. Идея была – сделать логотип Joomla, не используя изображения и иконки. Что из этого вышло вы узнаете далее.
Для решения этой задачки давайте внимательно посмотрим на логотип Joomla:
На первый взгляд, это сложная фигура, но если приглядеться… Вы замечали, что логотип Joomla состоит из 4 ортогональных букв «J»? Я вот, до вчерашнего дня – нет. Даже стыдно как-то =).
К каждой J снизу прикреплен круг того же цвета. Каждый из блоков буквы и круга имеет свой цвет и угол наклона. Это и есть весь логотип.
На первый взгляд, ничего сложного. На практике оказалось гораздо сложнее и интереснее.
HTML-разметка получилась такой:
<div class="joomla">
<div class="j1"></div>
<div class="j2"></div>
<div class="j3"></div>
<div class="j4"></div>
</div>Обратите внимание, здесь нет буквы J. Можно было бы добавить ее здесь, но оставим это для CSS.
CSS-код тоже получился не слишком большим, но расположить буквы зеркально оказалось не так просто:
.joomla { font-family: 'Poppins', sans-serif; font-size: 520px; font-weight: bold; position: relative; display: block; transform: rotate(1.5deg); width: 0.9em; height: 1em; margin-top: -0.1em; }
.joomla .j1 {transform: rotate(45deg); color: #4B8FCC; left: 0; top: 0.4em; z-index: 4;}
.joomla .j2 {transform: rotate(135deg); color: #72BF44; left: -0.02em; top: 0; z-index: 3;}
.joomla .j3 {transform: rotate(225deg); color: #FAA63F; left: 0.38em; top: -0.02em; z-index: 2;}
.joomla .j4 {transform: rotate(315deg); color: #EF4123; left: 0.40em; top: 0.38em; z-index: 1;}
.joomla > div {position: absolute;text-shadow: 0px 0px 3px #FFF; overflow: hidden;padding-bottom: 0.15em; box-sizing: border-box;}
.joomla > div::after {content: 'J'; overflow: hidden; position: relative; display: block;line-height: 0.75em; margin-top: -0.2em;}
.joomla > div::before {content: ''; display: block; width: 0.2em; height: 0.2em; border-radius: 50%; position: absolute;z-index: 10;bottom: 0.05em; left: 0; right: 0; margin: auto;}
.joomla .j1::before {background: #4B8FCC; }
.joomla .j2::before {background: #72BF44;}
.joomla .j3::before {background: #FAA63F;}
.joomla .j4::before {background: #EF4123;}
Интересной особенностью этого подхода стало то, что далеко не каждый шрифт подходит для создания логотипа Joomla. Буква J должна быть ровной и иметь заданные параметры.
Изначально я использовал шрифт Arial, но в нем J имеет немного скошенную поверхность. Это не то, чтобы сильно, но ломало логотип:
Поиски по Google Fonts привели меня к шрифту Poppins, в котором J подходила почти идеально.
В результате логотип получился таким:
Интересно, что логотип не ломается при изменении размера шрифта для базового контейнера.
Под конец, я решил добавить немного визуальных эффектов, используя волшебство CSS-анимации и трансформации:
Если у вас большой экран, посмотрите результат на отдельной странице. Как по мне, это залипательно =).
Всем хороших выходных!
