Малюємо іконку календаря за допомогою CSS3

42

Рисуем иконку календаря с помощью CSS3

Всім знову привіт!
Всі ми звикли бачити на сторінках сайтів і блогів, у записах чи коментарях, іконки дат календаря, що позначають дату. Фіча, без сумніву, корисна в багатьох відносинах, але погодьтеся, мало хто тягнувся з приводу того, як ці іконки створювалися. Найчастіше висновок дат прописаний в шаблонах у вигляді подгружаемой готової картинки або ж ставиться якийсь плагін, в якому всі ці прибамбаси передбачені, і знову ж таки з використанням зображень, отримуємо іконку з відображуваної датою.

Давайте подивимося, як можна використовуючи деякі властивості CSS, «намалювати» повноцінний значок календаря, нічим не відрізняється від іконок спрацьованих в різних програмах для роботи з графікою. Завдяки поправками і доповненнями внесеними Alen Grakalic розмітка цього творіння вийшла простіше нікуди, в чому ви самі зможете переконатися, поглянувши на приклад:

Дивитися Демо

HTML

Як уже говорилося, ми використовуємо спрощену html розмітку, для створення іконки, нам знадобитися всього лише один рядок коротенького коду, іншу роботу з оформлення покладемо на властивості і стандарти CSS3.

<div class="calendar">24<em>Березень</em></div>

24Март

Спакували нашу кнопку у div контейнер, ніхто не заважає використовувати параграф p, або новий елемент HTML5 — time. Всередині упаковки помістимо вкладений елемент em, який буде містити назву місяця.

Техніка виконання

І так, у нас є 2 основних елемента для роботи, плюс ми створили 2 псевдоэлемента для кожного з реальних, у сумі це дає нам 6 елементів для подальшої роботи, малювання фігур і позиціонування їх належним чином. Наприклад, псевдоелементи будуть використані для створення кілець листків календаря, коротше, подивившись на картинку нижче, все стане більш-менш зрозуміло:

Значок календаря на CSS

CSS

Спочатку розглянемо стиль для основного контейнера, яким присвоїмо, наприклад клас .calendar. Відразу хочу помітити, що в оформленні я використовував сучасні властивості CSS3, такі як box-shadow (тінь блоку), border-radius (округлені кути) і звичайно ж css градієнти, а тому потрібно пам’ятати, що не всі браузери коректно відобразять нашу задумку, втім, так і сильно не зіпсують. Принаймні Opera 10+, Firefox, Хромові і інші браузери на движку Webkit справляються з поставленим завданням на ура, а IE як завжди в глибокій дупі.
Слід звернути увагу, що не визначена фіксована висота height, що дає нам можливість більш гнучкого налаштування інших параметрів контейнера і вкладених елементів.

 .calendar{
margin:.25em 10px 10px 0;
padding-top:5px;
float:left;
width:80px;
background:#ededef;
 background: -webkit-gradient(linear, left, top, left bottom, from(#ededef), to(#ccc));
 background: -moz-linear-gradient(top, #ededef, #ccc);
 font:bold 30px/60px Arial Black, Arial, Helvetica, sans-serif;
text-align:center;
color:#000;
 text-shadow:#fff 0 1px 0;
 -moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
position:relative;
-moz-box-shadow:0 2px 2px #888;
 -webkit-box-shadow:0 2px 2px #888;
 box-shadow:0 2px 2px #888;
 }

.calendar{
margin:.25em 10px 10px 0;
padding-top:5px;
float:left;
width:80px;
background:#ededef;
background: -webkit-gradient(linear, left, top, left bottom, from(#ededef), to(#ccc));
background: -moz-linear-gradient(top, #ededef, #ccc);
font:bold 30px/60px Arial Black, Arial, Helvetica, sans-serif;
text-align:center;
color:#000;
text-shadow:#fff 0 1px 0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
position:relative;
-moz-box-shadow:0 2px 2px #888;
-webkit-box-shadow:0 2px 2px #888;
box-shadow:0 2px 2px #888;
}

Em — елемент, який містить назву місяця, можна експериментувати з будь-якими параметрами, підганяючи під свій індивідуальний смак, починаючи з кольору фону, шрифту виведеного тексту і закінчуючи радіусом закруглених кутів:

.calendar em{
display:block;
font:normal bold 11px/30px Arial, Helvetica, sans-serif;
color:#fff;
 text-shadow:#00365a 0 -1px 0;
 background:#04599a;
 background:-webkit-gradient(linear, left, top, left bottom, from(#04599a), to(#00365a));
 background:-moz-linear-gradient(top, #04599a, #00365a);
 -moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px;
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px;
border-top:1px solid #00365a;
 }

.calendar em{
display:block;
font:normal bold 11px/30px Arial, Helvetica, sans-serif;
color:#fff;
text-shadow:#00365a 0 -1px 0;
background:#04599a;
background:-webkit-gradient(linear, left, top, left bottom, from(#04599a), to(#00365a));
background:-moz-linear-gradient(top, #04599a, #00365a);
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px;
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px;
border-top:1px solid #00365a;
}

Тепер звернемо свій не затуманений погляд на стилі псевдоелемент, це ті що відповідають за створення кіл (або дірок) в папері нашого календаря.

.calendar:before, .calendar:after{
content:";
float:left;
position:absolute;
top:5px;
width:8px;
height:8px;
background:#111;
 z-index:1;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 1px 1px #fff;
 -webkit-box-shadow:0 1px 1px #fff;
 box-shadow:0 1px 1px #fff;
 }
.calendar:before{left:11px;}
.calendar:after{right:11px;}

.calendar:before, .calendar:after{
content:”;
float:left;
position:absolute;
top:5px;
width:8px;
height:8px;
background:#111;
z-index:1;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 1px 1px #fff;
-webkit-box-shadow:0 1px 1px #fff;
box-shadow:0 1px 1px #fff;
}
.calendar:before{left:11px;}
.calendar:after{right:11px;}

…і em псевдо-елементи, з допомогою яких промальовуємо кільця:

.calendar em:before, .calendar em:after{
content:";
float:left;
position:absolute;
top:-5px;
width:4px;
height:14px;
background:#dadada;
 background:-webkit-gradient(linear, left, top, left bottom, from(#f1f1f1), to(#aaa));
 background:-moz-linear-gradient(top, #f1f1f1, #aaa);
 z-index:2;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.calendar em:before{left:13px;}
.calendar em:after{right:13px;}

.calendar em:before, .calendar em:after{
content:”;
float:left;
position:absolute;
top:-5px;
width:4px;
height:14px;
background:#dadada;
background:-webkit-gradient(linear, left, top, left bottom, from(#f1f1f1), to(#aaa));
background:-moz-linear-gradient(top, #f1f1f1, #aaa);
z-index:2;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.calendar em:before{left:13px;}
.calendar em:after{right:13px;}

Ось і все, наш чудовий навісний календарик готовий, не багато терпіння і фантазії, і намалювали, в прямому сенсі цього слова, використовуючи лише чудова мова кодів і технік CSS3, реальну картинку, не поступається великоваговим форматеым побратимам.
Передбачаю запитання типу: навіщо город городити? Так в цьому і полягає вся двіжуха…

Велика іконка >

Іконка поменше >

Джерело: CSS Globe
Переклад і адаптація: shurawi

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: