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

Посмотрите пример.

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

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

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

Мы снова использовали псевдоэлементы :before и :after, чтобы сократить количество блоков, с чем опять не смог справится Internet Explorer 11. Мы подробно рассказывали о псевдоэлементах в предыдущем уроке, но если кратко, то у Internet Explorer 9 есть проблемы с некоторыми свойствами CSS, такими как border-radius, при использовании псевдоэлементов :before и/или :after.

Попытка браузера Internet Explorer 8 отобразить логотип правильно выглядит жалко, мы включили ее скорее для смеха.

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

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

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

Код 

Основная форма может быть задана при использовании всего лишь 4 блоков следующим образом:

<div id="batman-logo">
<div id="left-white"></div>
<div id="right-white"></div>
<div id="top-white"></div>
</div>

После этого мы можем использовать псевдоэлементы, чтобы создать недостающие блоки.

CSS3 

Мы снова используем свойство border-radius, чтобы создать эллиптические формы, и свойство transform, чтобы повернуть и правильно расположить формы.

#top-white {
width:12px;
left:228px;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-top:20px solid #fff;
}

#top-white:before {
content:"";
position:absolute;
width:65px;
height:77px;
background:#fff;
border-radius:30px 10px 10px 30px / 80px 50px 50px 50px;
top:-65px;
right:18px;
-moz-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-o-transform:rotate(5deg);
}
#top-white:after {
content:"";
position:absolute;
width:65px;
height:77px;
background:#fff;
border-radius:10px 30px 30px 10px / 50px 80px 50px 50px;
top:-65px;
left:18px;
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
}

Градиенты CSS3 

Код CSS, который нужен для создания градиентов, довольно громоздкий, но также и очень гибкий и относительно простой, если запомнить синтаксис, что не так легко, учитывая, что он различается у производителей webkit и moz.

background-image: -moz-linear-gradient(        /* Не забывайте о приставках браузеров */

left bottom,        /* Начало градиента (угол) */

rgb(72,84,92) 0%,        /* Первый цвет и его начало */

rgb(25,26,26) 63%,        /* Второй цвет и его начало */
rgb(26,26,26) 86%);        /* Третий цвет и его начало */

Сначала мы объявим тип градиента, убедившись, что мы не забыли о приставке производителя, в этом случае это — moz-linear-gradient. После этого мы зададим направление, из нижнего левого угла в правый верхний угол, и, наконец, зададим цвета, которые будут использованы, и места их переходов. Это довольно просто. Также стоит отметить, что Вы можете использовать шестнадцатеричные значения цвета вместо значений RGB, и то, и другое работает одинаково.

Тени блоков CSS3 

И, наконец, мы добавили дополнительный блок, чтобы поэкспериментировать с эффектами освещения. Мы использовали свойство border-radius, чтобы создать тонкий круг с высоким значением прозрачности. После этого мы использовали свойство box-shadow, чтобы создать белое размытие вокруг круга. Этот несложный эффект показывает пример области применения свойства тени блоков.

#lighting {
width:150px;
height:150px;
background:#fff;
border-radius:75px;
left:100px;
top:-10px;
opacity:0.02;
box-shadow: #fff 0 0 70px;
-webkit-box-shadow: #fff 0 0 70px;
-moz-box-shadow: #fff 0 0 70px;
}

И вот еще один логотип воссоздан с помощью CSS3.

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

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

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