Идея была – сделать логотип Joomla, не используя изображения и иконки. Что из этого вышло вы узнаете далее.
Логотип Joomla на чистом CSS

Выходные подкрались незаметно. В плохую погоду я немного заскучал и решил потренироваться в старом добром CSS. Идея была – сделать логотип Joomla, не используя изображения и иконки. Что из этого вышло вы узнаете далее.

Для решения этой задачки давайте внимательно посмотрим на логотип Joomla:

Joomla logo

На первый взгляд, это сложная фигура, но если приглядеться… Вы замечали, что логотип 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 имеет немного скошенную поверхность. Это не то, чтобы сильно, но ломало логотип:

arial logo

Поиски по Google Fonts привели меня к шрифту Poppins, в котором J подходила почти идеально.

В результате логотип получился таким:

poppins logo

Интересно, что логотип не ломается при изменении размера шрифта для базового контейнера.

Под конец, я решил добавить немного визуальных эффектов, используя волшебство CSS-анимации и трансформации:

Если у вас большой экран, посмотрите результат на отдельной странице. Как по мне, это залипательно =).

Всем хороших выходных!

Об авторе
Об авторе
Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.
Основной профиль – создание сайтов и расширений на CMS Joomla.

Понравилась статья? Сохраните себе:

Ваша оценка материала очень важна. Прошу вас оценить статью или оставить отзыв в комментариях.

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Комментарии  

0 # Guest 20.06.2020 10:19
Прикольно!
Ответить | Ответить с цитатой | Цитировать
+1 # Михаил 23.06.2020 16:34
Супер!!!! Красавчик
Ответить | Ответить с цитатой | Цитировать
+1 # Tatjana 14.07.2020 19:54
Классно!
Ответить | Ответить с цитатой | Цитировать