В этом уроке мы постараемся воссоздать знаменитый логотип Бэтмена. Ранее мы рассмотрели создание логотипа Pepsi, который оказался относительно простым, так как в нем нам нужно было работать всего с тремя цветными блоками, придав им определенную форму и разместив их соответствующим образом. Логотип Бэтмена несколько сложнее, так как использует более сложные формы, чем логотип Pepsi.

Мы использовали в этом уроке псевдоэлементы :before и :after, чтобы уменьшить количество блоков. Этот оказалось очень полезно для создания логотипа Бэтмена, так как изначально нам понадобилось 11 блоков, чтобы воссоздать этот логотип. А с помощью вышеупомянутых псевдоэлементов мы смогли уменьшить это количество всего до 6.

Демонстрация работы

Поддержка браузеров 

Поддержка этого логотипа на CSS3 старыми версиями браузеров несколько ограничена, но почти во всех современных браузерах она работает хорошо.

Важно заметить, что основная причина, по которой логотип не отображается правильно в некоторых браузерах, — то, что псевдоэлементы :before и :after в этих браузерах не поддерживают определенные свойства CSS3, например, такие, как border-radius и transform.

Браузеры, начиная от версий Firefox 4, Chrome 11, Opera 11.1 и Safari 5, отображают логотип правильно, но Internet Explorer даже версии 11 страдает от псевдоэлементов. Вы можете видеть, что свойство трансформации у псевдоэлементов все так же не поддерживается, так что элементы отображаются без поворота. В старой версии браузера Internet Explorer 9 кроме того не поддерживается скругление у псевдоэлементов :before и :after, хотя у других элементов есть закругленные углы.

У старых версий браузеров Firefox и Safari тоже есть проблемы с отображением свойств CSS3 при использовании псевдоэлементов.

Они бы отображали этот логотип правильно, если бы мы использовали дополнительную разметку HTML вместо использования псевдоэлементов, но цель этого урока — эксперимент с CSS3 и воссоздание логотипа наиболее эффективным способом, а затем выяснение, как результат поддерживается браузерами, а не попытка любыми способами добиться работоспособности во всех браузерах.

Насколько это похоже на оригинал? 

На первый взгляд логотип выглядит довольно похоже, но если сравнить его детально с настоящим, можно заметить некоторые различия. Приведение нашего логотипа в состояние, когда его невозможно было бы отличить от оригинала, было бы очень трудоемко, так что в целом мы довольны результатом. Вы сразу понимаете, что это логотип Бэтмена, и только когда вы смотрите одновременно на оригинал и наш логотип, вы можете увидеть разницу.

Псевдоэлементы 

Мы уже упоминали их много раз, но что же именно они делают? Они довольно простые: те, которые мы используем в этом уроке, просто добавляют содержимое до или после элемента. В этом случае мы создали один блок для желтых областей в верхней части логотипа Бэтмена, как показано ниже.

Обычно можно было бы использовать три блока, чтобы создать каждый из этих трех желтых элементов, но в этом случае мы создадим только один блок <div id="top-yellow"> для средней желтой части, а для левой и правой желтых частей мы будем использовать #top-yellow:before и #top-yellow:before, как вы можете видеть ниже.

Это просто, не так ли? И напоследок: когда мы используем псевдоэлементы, нам нужно определить содержимое следующим образом:

#top-yellow:before {
content:"";
}

Обычно можно вставить содержимое между кавычками, например «Это желтый блок», и после этого этот текст появится непосредственно перед каждым элементом с идентификатором #top-yellow. В этом случае мы просто задаем стили псевдоэлементам, так что нам не требуется содержимое.

И вот у нас есть логотип Бэтмена, воссозданный с использованием CSS3, псевдоэлементов и 6 блоков.

Демонстрация работы – Скачать исходный код

Автор урока Stephen Greig

Перевод — Дежурка

Смотрите также:

• Создание логотипа ленты новостей RSS с использованием CSS3
• Создание фонового изображения, закодированного в CSS
• Создание измельчителя бумаги с кнопкой удаления при помощи CSS3