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

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

Давайте рассмотрим подробнее, как Вы можете создать что-то подобное. Это легче, чем кажется на первый взгляд!

Сетка

Первое, что Вам нужно увидеть, — логотип нарисован в сетке. Мы использовали следующее изображение как основу, чтобы увидеть, какие формы присутствуют.

Теперь стало проще. Размер каждой ячейка сетки — 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 

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

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

• Эффект дождя на стекле при помощи HTML и CSS
• Создание изображения HAL 9000 c использованием только CSS
• Социальные закладки на бельевой веревке при помощи CSS