Иконка календаря созданная с помощью CSS показывающая текущий день недели, число и месяц.
Вы наверно обращали внимание на иконки с датой на страницах блогов, сайтов выполненных в виде иконки даты календаря. Нарисовать такую иконку в фотошопе пара минут работы и ничего особенного в этом нет, гораздо интереснее создать такую иконку с помощью одного лишь css.
Не так давно увидел подобное исполнение созданное с помощью flash, появилась идея создания своего варианта. Как и в увиденном флеше, моя идея заключается в выводе сегодняшней даты, но в отличии от увиденного, для вывода даты решил "набросать" небольшой скрипт.
Итак, небольшой скрипт генерирующий дату:
Скрипт выводит дату в трёх дивах, объединённых общим контейнером. Каждый блок отвечает за вывод дня недели, числа и текущего месяца. К каждому элементу применяется свои стили, чтобы придать иконке нужный вид.
CSS
Стили нашей иконки:
Теперь давайте рассмотрим отдельные элементы иконки.
Контейнер в котором содержатся блоки выводящие различные данные нашей даты -
Ширина нашей иконки установлена в 80px (
Размеры шрифта каждого элемента задаются в своих классах: день недели -
Цветовое оформление верхней части, в которой выводится день недели задаётся в
Чтобы не загружать блок лишними элементами вывод колец я решил создать через псевдо-элементы
Цветовое оформление колец можно изменить в
В зависимости от цветового оформления дизайна вашего форума сделать кольца темнее или светлее.
Ну и как обычно, правильное отображение будет только в современных браузерах.
Вы наверно обращали внимание на иконки с датой на страницах блогов, сайтов выполненных в виде иконки даты календаря. Нарисовать такую иконку в фотошопе пара минут работы и ничего особенного в этом нет, гораздо интереснее создать такую иконку с помощью одного лишь 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
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
- за остальную часть рамки.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Возможно. Рамка имеет свойствоmaco писал(а):может какой нибудь конфликт?
z-index: -1;
, возможно окружающее его место имеет z-index:
равный нулю или выше... Отсюда скорее всего и то что она появляется, а потом исчезает... по мере загрузки содержимого страницы.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Таки да. Это моя Ахиллесова пята.CabinetAdmin » Сегодня, 06:29 писал(а):Кеш?...
У меня тоже не видноmaco писал(а):Приветствую, все прекрасно установилось, большое спасибо, единственное - черная рамочка вокруг никак не цепляется, присутствует только сверху, слева, справа и снизу ее нет, в хроме тоже самое (браузер Опера).
Можно в настройках скрипта:
добавить ещё один див, примерно так:
И добавить к нему класс, который будет создавать фон. Добавить к стилям календаря:
Потом к
Код: Выделить всё
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;
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Похожие темы
-
Я установила хороший мод календаря, сделала перевод, но он отражаться некорректно и вне которых местах вообще нет перевода. Разными способами...