Пример красивого вывода даты c использованием CSS

Приведу пример реализации вывода даты, которая выводится в виде текста над картинкой, как это показано справа от данного абзаца.
Для реализации такого вывода даты воспользуемся свойствами CSS, приведенными в таблице.

Название Основные значения Описание Примеры
float left, right, none, inherit (наследование свойств родителя) Определяет, с какой стороны будет размещен элемент,
при этом остальные элементы будут обтекать его с другой стороны. Используется при создании шаблонов.
Когда значение свойства float равно none, элемент выводится на странице как обычно.
float:none
padding Величина полей в основном указывается в пикселах (px), процентах (%). Задает значение полей вокруг содержимого элемента. padding: 10px;
padding: 10%;
padding-top
padding-right
padding-left
padding-bottom
Величина полей в основном указывается в пикселах (px), процентах (%). Задает значение поля от верхнего, правого, левого и нижнего края содержимого элемента, соответственно. padding-left: 5px;
padding-bottom:5%
margin Величина полей в основном указывается в пикселах (px), процентах (%). Задает отступ от каждого края элемента. margin: 10px;
margin: 10%;
margin-top
margin-right
margin-left
margin-bottom
Величина полей в основном указывается в пикселах (px), процентах (%). Задает значение поля от верхнего, правого, левого и нижнего края родительского элемента, соответственно. margin-left: 5px;
margin-bottom:5%
Замечание.

margin: 0px;
padding: 10px;

padding добавляется к общей ширине элементов. Например, если содержимое элемента должно быть шириной 200px,
и необходимо получить отступы (padding) по 20 пикселей, то общая ширина должна быть 240 пикселей.
margin: 10px;
padding: 10px;
200px (содержимое) + 20px (левый отступ) + 20px (правый отступ) = 240px (общая ширина элемента)Margin, напротив — расширяет «коробку» элемента, но не влияет на его ширину. Т.е. margin — внешнее пространство, padding — внутреннее.
line-height множитель, значение, проценты, normal, inherit Устанавливает межстрочный интервал line-height: 60%
line-height: 1.5
letter-spacing значение, normal, inherit Задает интервал между символами letter-spacing: 5px;
letter-spacing: -1px;
font-family имя шрифта Устанавливает семейство шрифтов font-family: Geneva, Arial, Courier New, Helvetica
font-weight bold, bolder, lighter, normal, 100, 200, …,900 задает насыщенность шрифта font-weight: 400

Для решения поставленной задачи набираем следующее описание CSS (предполагается наличие файла button3.png):

<style>
.eav_Date	{
		float: right;
		padding: 0px;
		background: url("button3.png") no-repeat;
		margin: 4px;
		height: 71px;
		text-align: center;
		color:#fff;
		width: 52px;}
.eav_Date div 	{
		font-family: 'Verdana';
		line-height: 9px;
			}
.eav_Date .d 	{
		font-size: 19px;
		line-height: 18px;
		letter-spacing: -1px;
		padding-top: 7px;
		font-family: 'Arial';	}
.eav_Date .m {
		font-size: 10px;
		text-transform: lowercase;}
.eav_Date .y 	{
		padding-top: 7px;
		font-weight: normal;}
</style>

Пример использования

<span class="eav_Date">
<div class="d">14</div>
<div class="m">03</div>
<div class="y">2011</div>
</span>
Поделиться:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • LiveJournal
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • StumbleUpon
  • Technorati
  • БобрДобр
  • Memori.ru
  • МоёМесто.ru

2 комментария к “Пример красивого вывода даты c использованием CSS”

  1. Возникают проблемы если не верно распарсить дату или увеличить размер шрифта. Предлагаю использовать: .nh_div{ font-family:Arial, Tahoma, Verdana; background-color:#6e6d6d; font-size:14px; color:#ffffff; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; }

  2. Проверил. Получается красиво. Но это был пример именно с использованием рисунка. Но я согласен, что если можно сделать без рисунка, то лучше так и сделать.

Комментарии закрыты.