html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Создание логотипа Pepsi с использованием CSS3

В этом уроке мы постараемся воссоздать логотип компании 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

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

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

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

14

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • css
          • pepsi
          • логотипы
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции