Иконка календаря с помощью CSS

Все мы привыкли видеть на страницах сайтов и блогов, в записях или комментариях, иконки дат календаря, обозначающие дату. Фича без сомнения полезная во многих отношениях, но согласитесь, мало кто напрягался по поводу того, как эти иконки создавались. Чаще всего вывод дат прописан в шаблонах в виде подгружаемой готовой картинки или же ставится какой — нибудь плагин, в котором все эти прибамбасы предусмотрены, и опять же с использованием изображений, получаем иконку с отображаемой датой.

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

HTML

Как уже говорилось, мы используем html разметку для создания иконки, нам понадобиться всего лишь одна строчка коротенького кода, остальную работу по оформлению возложим на функции и стандарты CSS.

Приведу пример расположения ленточек сразу во всех углах веб-страницы:

		 
<p class="calendar">24<em> Март</em></p></div> 
	

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

Техника исполнения

И так, у нас есть 2 основных элемента для работы, плюс мы создали 2 псевдо — элемента для каждого из реальных, в сумме это дает нам 6 элементов для дальнейшей работы, рисования фигур и позиционирования их должным образом. Например, псевдо — элементы будут использованы для создания колец листа календаря, короче, посмотрев на картинку ниже, все станет более или менее понятно.

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;
	}

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: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;}

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




Возврат к списку