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

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

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

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

В этом случае все современные версии браузеров, как и большинство устаревших версий, отлично справились с этой задачей. Хотя у старых версий браузера Chrome есть небольшие проблемы, а старые версии браузера Internet Explorer ведут себя еще хуже.

Проблемы со старыми версиями браузеров Chrome и Internet Explorer 

Хотя старые версии браузера Chrome поддерживают свойство трансформации, видимо, оно вызывает неровные края у повернутых элементов, хотя в нашем случае это может быть замечено не сразу, но это ухудшает результат при ближайшем рассмотрении, как вы видите на изображениях ниже.

Мы добавили белые направляющие, чтобы более четко показать неровность контуров в старых версиях браузера Chrome в сравнении с гладким изгибом, отображаемым в браузере Firefox.

Браузер Internet Explorer 9 просто не поддерживает свойство трансформации, в результате чего красные и белые области логотипа располагаются горизонтально, а не под углом.

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

Но в браузере Internet Explorer 10 и в более поздних версиях логотип выглядит хорошо.

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

CSS 

Мы не будем разбирать код детально, но рассмотрим важные свойства, которые позволили нам трансформировать простые формы во что-то, похожее на логотип Pepsi.

Радиус границы 

Прежде всего у нас есть свойство border-radius, которое уже очень широко используется  как самый легкий способ создания скругленных форм. Хотя о полных возможностях этого свойства знают далеко не все.

Мы имеем в виду способность создавать эллиптические границы, используя свойство border-radius. Чтобы добиться этого, мы просто задаем два значения вместо одного: одно для горизонтального размера, второе — для вертикального. Синтаксис для разных приставок производителей немного отличается, так что будьте осторожны, используя этот способ.

border-radius:500px / 300px;

-moz-border-radius:500px / 300px;
-webkit-border-radius:500px 300px;

Трансформация 

Свойство transform позволяет нам поворачивать элементы. Ниже показано, что получалось у нас до применения этого свойства.

Это не было ужасно, но и не было идеально. Чтобы сделать логотип более похожим на оригинал, нам просто нужно слегка повернуть белую и красную области против часовой стрелки. И снова не забывайте о приставках производителей.

-webkit-transform:rotate(-15deg);

-moz-transform:rotate(-15deg);
-o-transform:rotate(-15deg);

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

И наконец, вот окончательная версия логотипа Pepsi и полный исходный код.

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

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

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

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

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