Иконка календаря созданная с помощью CSS показывающая текущий день недели, число и месяц.

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

Итак, небольшой скрипт генерирующий дату:

Код: Выделить всё

<script type="text/javascript">
var day = new Date();
var weekday=new Array(7);
	weekday[0]="Воскресенье";
	weekday[1]="Понедельник";
	weekday[2]="Вторник";
	weekday[3]="Среда";
	weekday[4]="Четверг";
	weekday[5]="Пятница";
	weekday[6]="Суббота";
var d=new Date();
var month=new Array(12);
	month[0]="Января";
	month[1]="Февраля";
	month[2]="Марта";
	month[3]="Апреля";
	month[4]="Мая";
	month[5]="Июня";
	month[6]="Июля";
	month[7]="Августа";
	month[8]="Сентября";
	month[9]="Октября";
	month[10]="Ноября";
	month[11]="Декабря";
	document.write('<div class="calendar"><div class="weekday">'+weekday[day.getDay()]+'</div><div class="day">'+day.getDate()+'</div><div class="month">'+month[d.getMonth()]+'</div></div>');
</script> 
Скрипт выводит дату в трёх дивах, объединённых общим контейнером. Каждый блок отвечает за вывод дня недели, числа и текущего месяца. К каждому элементу применяется свои стили, чтобы придать иконке нужный вид.

CSS

Стили нашей иконки:

Код: Выделить всё

/* Calendar Icon With CSS3 :: http://cabinetadmina.ru/
-----------------------------------------v.1.0.0--- */
.calendar {
	margin: .25em 10px 10px;
	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);
	background: linear-gradient(top,  #ededef,  #ccc);
	text-align: center;	
	position: relative;
}
.weekday {
	display: block;
	font: 10px/20px Arial, Helvetica, sans-serif;
	color: #fff;
	text-shadow: 0 -1px 0 #00365a;	
	background: #038AF1;
	background: -webkit-gradient(linear, left top, left bottom, from(#038AF1), to(#066DB3)); 
	background: -moz-linear-gradient(top,  #038AF1,  #066DB3);
	background: linear-gradient(top,  #038AF1,  #066DB3); 
	border-bottom: 1px solid #0263A3;
	margin-bottom: 10px;
	padding-top: 10px;
}
.day, .month {
	color: #000;
	text-shadow: 0 1px 0 #ebebeb;
}
.day {font: bold 35px/25px Arial, Helvetica, sans-serif;}
.month {font: bold 11px/20px Arial, Helvetica, sans-serif;}
.calendar:before, .calendar:after {
	content: '';
	position: absolute;
	width: 88px;
	background: #414141;
	left: -4px;
}
.calendar:before {
	top: 5px;
	height: 100%;
	z-index: -1;
	background: -webkit-radial-gradient(center, ellipse cover, #dddddd 25%,#000000 100%);
	background: -moz-radial-gradient(center, ellipse cover, #dddddd 25%, #000000 100%);
	background: radial-gradient(ellipse at center, #dddddd 25%,#000000 100%);
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	-moz-box-shadow: 0 2px 2px #888;
	-webkit-box-shadow: 0 2px 2px #888;
	box-shadow: 0 2px 2px #888;
}
.calendar:after {
	height: 3px;
	top: 2px;
	background: -webkit-radial-gradient(center, ellipse cover, #dddddd 0%,#000000 100%);
	background: -moz-radial-gradient(center, ellipse cover, #dddddd 0%, #000000 100%);
	background: radial-gradient(ellipse at center, #dddddd 0%,#000000 100%);
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}
.day:before, .day:after {
	content: '';
	position: absolute;
	top: 0px;	
	width: 2px;
	height: 10px;
	background: #aaa;
	background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa));
	background: -moz-linear-gradient(top,  #f1f1f1,  #aaa);
	background: linear-gradient(top,  #f1f1f1,  #aaa);
	z-index: 2;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}
.day:before {left: 17px;}
.day:after {right: 17px;}
.weekday:before, .weekday:after {
	content: '';
	position: absolute;
	top: 8px;	
	width: 6px;
	height: 6px;
	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;
}
.weekday:before {left: 15px;}	
.weekday:after {right: 15px;}
Теперь давайте рассмотрим отдельные элементы иконки.

Контейнер в котором содержатся блоки выводящие различные данные нашей даты - .calendar.
Ширина нашей иконки установлена в 80px (width: 80px;). Исходя из ваших потребностей вы можете её уменьшить, но уменьшая её нужно будет подкорректировать ширину у псевдо-элементов - .calendar:before, .calendar:after, создающий тёмную рамку вокруг.
Размеры шрифта каждого элемента задаются в своих классах: день недели - .weekday, число - .day, месяц - .month.
Цветовое оформление верхней части, в которой выводится день недели задаётся в .weekday. На фоне этого элемента есть два отверстия, через которые выходят что-то типа колец, вывод и дизайн которых формируется в псевдо-элементах .weekday:before и .weekday:after.
Чтобы не загружать блок лишними элементами вывод колец я решил создать через псевдо-элементы .day:before и .day:after.
Цветовое оформление колец можно изменить в .day:before, .day:after:

Код: Выделить всё

	background: #aaa;
	background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa));
	background: -moz-linear-gradient(top,  #f1f1f1,  #aaa);
	background: linear-gradient(top,  #f1f1f1,  #aaa);
В зависимости от цветового оформления дизайна вашего форума сделать кольца темнее или светлее.


Ну и как обычно, правильное отображение будет только в современных браузерах.
Комментарии: 13

romaamor 18 авг 2013, 23:46 Сообщение

Класс. :drink: Теперь вот думаю куда его поставить ? :scratch:
  • 0

silver073000Василий 20 авг 2013, 01:22 Сообщение

Можно в уголочку поверх шапки слева или справа пристроить это :)
Только вопрос - как правильно? :) Если так вставить, то календарик сдвигает шапку вниз.
  • 0

CabinetAdmin 20 авг 2013, 14:20 Сообщение

BOJIK
Надо смотреть код, наверно надо будет что нибудь добавить или убавить... :unknown
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

maco 20 авг 2013, 18:41 Сообщение

Приветствую, все прекрасно установилось, большое спасибо, единственное - черная рамочка вокруг никак не цепляется, присутствует только сверху, слева, справа и снизу ее нет, в хроме тоже самое (браузер Опера).
  • 0

CabinetAdmin 20 авг 2013, 19:03 Сообщение

maco
Не должно быть проблем... за рамочку отвечает этот кусок кода:

Код: Выделить всё

.calendar:before, .calendar:after {
   content: '';
   position: absolute;
   width: 88px;
   background: #414141;
   left: -4px;
}
.calendar:before {
   top: 5px;
   height: 100%;
   z-index: -1;
   background: -webkit-radial-gradient(center, ellipse cover, #dddddd 25%,#000000 100%);
   background: -moz-radial-gradient(center, ellipse cover, #dddddd 25%, #000000 100%);
   background: radial-gradient(ellipse at center, #dddddd 25%,#000000 100%);
   -moz-border-radius: 0 0 5px 5px;
   -webkit-border-radius: 0 0 5px 5px;
   border-radius: 0 0 5px 5px;
   -moz-box-shadow: 0 2px 2px #888;
   -webkit-box-shadow: 0 2px 2px #888;
   box-shadow: 0 2px 2px #888;
}
.calendar:after {
   height: 3px;
   top: 2px;
   background: -webkit-radial-gradient(center, ellipse cover, #dddddd 0%,#000000 100%);
   background: -moz-radial-gradient(center, ellipse cover, #dddddd 0%, #000000 100%);
   background: radial-gradient(ellipse at center, #dddddd 0%,#000000 100%);
   -moz-border-radius: 5px 5px 0 0;
   -webkit-border-radius: 5px 5px 0 0;
   border-radius: 5px 5px 0 0;
}
:after - отвечает за верхнюю часть рамки, :before - за остальную часть рамки.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

maco 21 авг 2013, 03:46 Сообщение

хм.....как не делал - все по прежнему, вначале появляется на секунду (рамка) и исчезает, может какой нибудь конфликт?
  • 0

CabinetAdmin 21 авг 2013, 13:58 Сообщение

maco писал(а):может какой нибудь конфликт?
Возможно. Рамка имеет свойство z-index: -1;, возможно окружающее его место имеет z-index: равный нулю или выше... Отсюда скорее всего и то что она появляется, а потом исчезает... по мере загрузки содержимого страницы.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 21 авг 2013, 20:15 Сообщение

А у меня на хроме только буковки. :(
  • 0

CabinetAdmin 22 авг 2013, 05:29 Сообщение

Кеш?...
  • 0

romaamor 22 авг 2013, 13:43 Сообщение

CabinetAdmin » Сегодня, 06:29 писал(а):Кеш?...
Таки да. Это моя Ахиллесова пята. :D
  • 0

Дим 28 дек 2013, 17:29 Сообщение

maco писал(а):Приветствую, все прекрасно установилось, большое спасибо, единственное - черная рамочка вокруг никак не цепляется, присутствует только сверху, слева, справа и снизу ее нет, в хроме тоже самое (браузер Опера).
У меня тоже не видно
  • 0

CabinetAdmin 28 дек 2013, 19:28 Сообщение

Можно в настройках скрипта:

Код: Выделить всё

document.write('<div class="calendar"><div class="weekday">'+weekday[day.getDay()]+'</div><div class="day">'+day.getDate()+'</div><div class="month">'+month[d.getMonth()]+'</div></div>');
добавить ещё один див, примерно так:

Код: Выделить всё

document.write('<div class="calendar"><div class="calendar_bg"><div class="weekday">'+weekday[day.getDay()]+'</div><div class="day">'+day.getDate()+'</div><div class="month">'+month[d.getMonth()]+'</div></div></div>');
И добавить к нему класс, который будет создавать фон. Добавить к стилям календаря:

Код: Выделить всё

.calendar_bg {
background: #ededef;
background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc));
background: -moz-linear-gradient(top, #ededef, #ccc);
background: linear-gradient(top, #ededef, #ccc);
}
Потом к .calendar { добавить:

Код: Выделить всё

z-index: 0;
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Дим 28 дек 2013, 19:45 Сообщение

Благодарю, теперь всё нормально.
  • 0

Похожие темы