В этом уроке мы создадим более сложный логотип Volkswagen. Логотипы, о создании которых мы рассказывали раньше, состояли из плоских фигур, тогда как у логотипа Volkswagen гораздо больше глубины, несколько градиентов и тени. Мы сосредоточимся на свойстве градиента CSS3, разбирая код и объясняя синтаксис. Также коснемся свойства box-shadow и повторим вкратце псевдоэлементы.

Для более детального ознакомления с псведоэлементами, обратитесь к уроку «Создание логотипа Бэтмена с использованием CSS3».

Вероятно, вы хотите увидеть логотип, который мы создадим? Вот он:

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

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

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

И на этот раз браузеры Firefox, Chrome и Opera отлично справились, но неожиданно подвел браузер Safari. Но если добавить старый синтаксис webkit для градиентов CSS3, все отображалось бы правильно, но мы решили использовать только новый синтаксис, который точно такой же, как и у -moz- и -o-. Старый синтаксис более громоздкий и менее удобный.

Старые версии браузера Opera неплохо справлялись, но не отображали круговой градиент на области основного голубого фона, он оставался одноцветным.

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

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

Как и в прошлых уроках, логотип очень похож на оригинал. И только если разместить рядом оригинал, вы можете заметить небольшие отличия, главным из которых кажется более насыщенная тень у V и W у оригинального логотипа.

Код 

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

<div id="vw-logo">
<div id="blue-silver"></div>
<div id="shadow-blue"></div>
<div id="v"></div>
<div id="w-left"></div>
<div id="w-right"></div>
<div id="extras"></div>
<div id="shadow-fix"></div>
</div>

Фоновые круги было довольно просто создать, использую свойство border-radius, а затем оживить, используя свойства CSS3 linear-gradient и box-shadow.

Градиенты CSS3 

Вот строка кода, чтобы создать градиент CSS для внешней рамки логотипа Volkswagen.

background-image: -moz-linear-gradient( top left, #e0dcd9 0%, #b7b9b4 63%, #a4a4a4 92%);

Теперь давайте разберем ее и рассмотрим синтаксис.

Довольно легко, не так ли? Мы начинаем с приставок производителя, так что это или -moz-, или -webkit- , или -o-. После этого в скобках мы объявляем начальный угол градиента, в этом случае это левый верхний угол, после чего мы задаем цвета переходов и их начальные точки в процентах, отделяя каждый цвет запятой.

Тень блока CSS3 

Мы очень кратко коснулись свойства box-shadow в предыдущем уроке, а в этом уроке мы разберемся в этом подробней.

Давайте начнем с легкой части. Основной внутренний серебристый круг логотипа  Volkswagen отбрасывает тень на нижнюю левую часть этого элемента. Чтобы создать этот эффект, мы просто запишем:

box-shadow:5px 5px 5px #150f31;

Первое значение — это горизонтальное положение тени, например, так как тут задано 5px, она сдвигается на 5px вправо от элемента, если бы это значение было равно -5px, то она сдвигалась бы влево от элемента. Следующее значение — это вертикальное расположение, к которому применяются те же правила. После этого идет размытие тени. 0 — наиболее жесткое значение, и размытие увеличивается вместе со значением. И в конце идет цвет, что говорит само за себя.

Используем ключевое слово inset 

Мы усовершенствовали наше использование свойства box-shadow в расположении тени внутри элемента при помощи значения inset.

box-shadow:inset 5px 4px 5px #2c3447;

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

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

Последние штрихи 

Буквы V и W были наиболее сложными частями логотипа, и тут он стал немного неряшливым. Если вы посмотрите на логотип безо всех градиентов, вы увидите, где нам пришлось немного подправить.

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

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

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

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

• Создание логотипа Gmail с использованием CSS3
• Создание логотипа Pepsi с использованием CSS3
• Создание логотипа ленты новостей RSS с использованием CSS3