Создание логотипа IBM Lotusphere с использованием CSS3
14 апреля 2014 | Опубликовано в css | Нет комментариев »
![ibm_lotusphere-small](https://www.dejurka.ru/wp-content/uploads/2014/04/ibm_lotusphere-small.jpg)
Посмотрите пример, чтобы увидеть, как выглядит логотип в вашем браузере. Не забывайте, при его создании не было использовано ни одного изображения. Не стесняйтесь покопаться в исходном коде, возможно, вы откроете для себя что-то новое.
Демонстрация работы – Скачать исходный код
Давайте рассмотрим подробнее, как Вы можете создать что-то подобное. Это легче, чем кажется на первый взгляд!
Сетка
Первое, что Вам нужно увидеть, — логотип нарисован в сетке. Мы использовали следующее изображение как основу, чтобы увидеть, какие формы присутствуют.
Теперь стало проще. Размер каждой ячейка сетки — 76x76px. Мы просто запишем это с помощью HTML и CSS.
HTML
<div class="block"></div>
CSS
.block { width:76px; height:76px; background-color:#fff; float:left; overflow:hidden; }
Как мы отметили ранее, один из основных секретов — свойство overflow:hidden. С помощью него мы можем размещать формы внутри ячеек и передвигать их внутри ячеек. Сетка так же дает нам еще одну важную возможность. Мы можем обозначать блоки по их местоположению, используя координаты X и Y. Например, мы использовали идентификатор x10y02, это 10-й столбец, второй ряд.
Формы
Теперь, если вы внимательно всмотритесь в сетку, Вы заметите, что логотип состоит всего из нескольких форм, хотя некоторые повернуты и другого цвета. Давайте рассмотрим, какие формы использованы.
1. Круг
2. Заполненный круг
3. Точка
4. Двойной заполненный круг
Точка и двойной заполненный круг использованы только по одному разы, другие две формы — чаще. Давайте рассмотрим, как Вы можете создать эти формы!
HTML
<div id="xy1" class="block"> <div class="circle topRight"></div> </div> <div id="xy2" class="block"> <div class="fullCircle"></div> </div> <div id="xy3" class="block"> <div class="dot"></div> </div> <div id="xy4" class="block"> <div class="fullCircle bottomRight"></div> <div class="fullCircle topRight overlay"></div> </div>
CSS
/* Общие свойства */ .circle { width:112px; height:112px; border-radius:50%; border-width:20px; border-style:solid; } .fullCircle { width:152px; height:152px; border-radius:50%; } .dot { width:15px; height:15px; border-radius:50%; } /* Расположение */ .topRight { margin-left:-76px; } .bottomRight { margin-left:-76px; margin-top:-76px; } .bottomLeft { margin-top:-76px; } /* Особые свойства */ #xy1 .circle { border-color:#8ec642; } #xy2 .fullCircle { background-color:#ea4295; } #xy3 .dot { background-color:#82d2f5; margin-left:45px; margin-top:45px; } #xy4 .fullCircle { background-color:#face12; } #xy4 .overlay { background-color:#1183ae; position:relative; top:-76px; opacity:0.6; }
Используя классы topRight, bottomRight и bottomLeft, мы можем поворачивать формы. Используя особые свойства, мы можем задать цвет элементов. Как Вы видите, круг использует свойство border, а заполненный круг — background-color. Теперь, когда Вы знаете об этом, Вы можете углубиться в код, чтобы посмотреть, как созданы другие особые ячейки!
Псевдоэлементы
Так как в этом примере использовано уже очень много элементов HTML, мы хотели уменьшить это количество, используя псевдоэлементы CSS3. Что позволит нам создать элементы :before или :after для определенного элемента. Вот оставшийся код HTML и CSS, в нем приставка «p» означает псевдо-.
HTML
<div id="pxy1" class="block pCircle pTopRight"></div> <div id="pxy2" class="block pFullCircle"></div> <div id="pxy2" class="block pDot"></div> <div id="px4" class="block"></div>
CSS
/* Общие свойства */ .pCircle:after { content:''; display:block; width:112px; height:112px; border-radius:50%; border-width:20px; border-style:solid; } .pFullCircle:after { content:''; display:block; width:152px; height:152px; border-radius:50%; } .pDot:after { content:''; display:block; width:15px; height:15px; border-radius:50%; } /* Расположение */ .pTopRight:after { margin-left:-76px; } .pBottomRight:after { margin-left:-76px; margin-top:-76px; } .pBottomLeft:after { margin-top:-76px; } /* Особые свойства */ #pxy1:after { border-color:#8ec642; } #pxy2:after { background-color:#ea4295; } #pxy3:after { background-color:#82d2f5; margin-left:45px; margin-top:45px; } #pxy4:before { content:''; display:block; width:152px; height:152px; border-radius:50%; margin-left:-76px; margin-top:-76px; background-color:#face12; } #pxy4:after { content:''; display:block; width:152px; height:152px; border-radius:50%; margin-left:-76px; background-color:#1183ae; position:relative; top:-76px; opacity:0.6; }
Как вы видите, код HTML теперь выглядит опрятнее, а код CSS не так уж сильно изменился. Это еще один пример того, насколько полезными могут быть псевдоэлементы.
Заключение
В общем, мы считаем, что это изящный способ вывести логотип, не используя изображений. Особенно второй пример с псевдоэлементами CSS3 использует особо чистый код HTML. К сожалению, мы не смогли подобрать правильный зеленый цвет для двойного заполненного круга, используя свойство opacity и желтые и голубые цвета. Мы также считаем, что код может быть как-то оптимизирован.
Демонстрация работы – Скачать исходный код
Автор урока Marco Kuiper
Перевод — Дежурка
Смотрите также: