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

Окончательный результат выглядит как на картинке ниже.

Календарь на CSS3 без изображений

Просмотреть демо статьи

HTML

HTML для создания значка календаря простой (квадратные скобки заменить на угловые):

<div class="calendar">7 <em>February</em></div>

Принцип

Нужно работать с 2мя элемента, плюс я создал 2 псевдо-элемента для каждого из элементов, которые дадут мне всего 6 элементов, используемых для рисования фигур и расположения их надлежащим образом. Псевдо-элементы будут использоваться для спиралей календаря (кольца сверху).

Если вы посмотрите на рисунок идея станет яснее.

Принцип создания CSS иконки календаря

Сначала зададим стиль контейнера. Заметьте, что я использовал box-shadow, border-radius и CSS градиенты. Не все браузеры будут отображать все эти свойства, что приведёт к ухудшению изображения в них.
Обратите внимание, что фиксированная высота не определена, вы можете контролировать высоту с помощью свойства line-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;}

Вы можете посмотреть несколько демок данного урока: