Как нарисовать календарные иконки с помощью CSS3

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

HTML

Как уже упоминалось, HTML разметка очень проста.

Мы используем элемент параграфа p, хотя можно попробовать и DIV (или новый элемент из HTML5 — TIME). Внутри этого элемента располагается еще один экстра-элемент, который содержит в себе наименование месяца.

Принцип работы

Теперь у нас есть два элемента для работы, плюс два псевдо-элемента для каждого реального элемента, что в итоге дает нам 6 элементов, которые мы можем использовать для рисования фигур и их позиционирования.

Если вы посмотрите на рисунок ниже, то увидите примерную схему работы этих элементов.

Сначала стиль элемента контейнера. Мы будем использовать свойства box-shadow, border-radius и CSS градиенты. Не все браузеры сейчас могут рисовать такие свойства, но большинство из них будут приятно деградировать графику.

Обратите внимание, что высота контейнера не фиксированная. Сама высота контролируется с помощью элементов с контентом.

Также прописываем стили для элемента Em.

Теперь прописываем стили для псевдо-элементов. Псевдо элементы (:before и :after) будут использоваться для отрисовки кругов и дырок.

...и псевдо-элементы Em для отрисовки колец:

Важно помнить, что вы сами можете управлять количеством дырок, все зависит только от псевдо-элементов.

Вот и все! Удачи! :)
P.S: Конечно, календарные иконки смогут отлично украсить и разнообразить ваш сайт. Ну, а если вы захотите разнообразить свою жизнь, то вполне можно съездить... в Италию, например. Правда для этого не помешало бы сначала узнать, какая будет погода в Италии в ноябре.


2 комментарий на “Как нарисовать календарные иконки с помощью CSS3

  1. Все это конечно замечательно, но стоит ли шкурка выделки. Картинка календарика в png24 весит 1кб и не нужно мучатся с кроссбраузерностью. Даже в 8 ie иконка выглядит ужасно.

    Thumb up 0 Thumb down 0

    • Да у такой технологии есть свои минусы.

      Но зато представьте, если у пользователя вдруг отключены картинки, а он видит такую красоту, даже если она будет урезанная.

      И потом код иконки представлен уже готовый. Т.е. вставил, и он работает.

      Так что веб-мастерам решать. Использовать или нет.

      Thumb up 0 Thumb down 0

Оставить комментарий