Пример профессиональной CSS3 вёрстки комментариев

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

Чтобы не тыкать пальцем в небо и оценить масштабы трудностей я решил сверстать на чистом CSS3 и HTML представление для комментариев.

Применены стабильно работающие свойства transition, что позволило сделать простую и эффектную анимацию, а в качестве графики использован приём эмуляции градиентов посредством box-shadow.

Что у меня получилось — судить вам. Анатомические подробности под катом

Для начала посмотрим как это выглядит и обозначим плюсы данного подхода.

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

Listing вёрстки

Разберёмся подробнее как это сделано. Базовый каркас выполнен на основе списков определения. В данном случае такой подход обеспечивает семантичность и простоту написания CSS для дальнейшего оформления.

<dl>
<dt><img src="av.gif" alt="аватар ..." width="70px" height="70px" /></dt>
<dd>
	<div class="comment_info">
		<a class="Author" href="#">Автор комментария</a>
			<a class="Date" href="#" title="комментарий 3 опубликован 28 апреля 2011">28 апреля 2011</a>
	</div>
 
	<p>Какой то интересный комментарий. Тут мало или много текста. Это не важно, просто комментарий.</p>
	<p>Ну и конечно же тут может быть <a href="#">ссылка</a>, например, или текст <strong>жирным</strong></p>
	<div class="cntrls"><a href="#">ответить</a></div>
</dd>
</dl>

Для того чтобы сделать шаблон интереснее, я решил воспользоваться отличным свойством CSS3 box-shadow. С помощью box-shadow выполнены тройные подвижные тени под аватаром и оформление кнопки «Ответить».

Чтобы получить такие эффекты мы воспользуемся множественной записью и отпозиционируем всё соответствующим образом.

dt {
  /* Force box-shadows */
	-webkit-box-shadow: #d9bfd9 -30px -30px 18px 1px, #afdfc9 85px 30px 23px 1px, #f5f5dc -30px 150px 35px 2px;
		-moz-box-shadow: #d9bfd9 -30px -30px 18px 1px, #afdfc9 85px 30px 23px 1px, #f5f5dc -30px 150px 35px 2px;
			box-shadow: #d9bfd9 -30px -30px 18px 1px, #afdfc9 85px 30px 23px 1px, #f4f4f7 -30px 150px 35px 2px;
}

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

Чтобы получить эффект смешения, мы воспользуемся свойством CSS3 transition для состояния :hover и опишем новые положения.

dt:hover {
	opacity: .7;
 
	-webkit-box-shadow: #d9bfd9 -25px -37px 18px 1px, #afdfc9 80px 30px 20px 11px, #f5f5dc -30px 120px 35px 12px;
		-moz-box-shadow: #d9bfd9 -25px -37px 18px 1px, #afdfc9 80px 30px 20px 11px, #f5f5dc -30px 120px 35px 12px;
			box-shadow: #d9bfd9 -25px -37px 18px 1px, #afdfc9 80px 30px 20px 11px, #b0c4de -30px 120px 35px 12px;
 
  /* Force transition effect on mouse hover for all properties. This code do the colored shadows shifted to avatar when mouse hover dt element */
		-webkit-transition: all .6s ease-in-out;
			-moz-transition: all .6s ease-in-out;
				-o-transition: all .6s ease-in-out;
					transition: all .6s ease-in-out;
}

Как видите, всё достаточно просто. Теперь при наведении на аватар тени будут смещаться ближе к центру, а одна из них изменит цвет на более заметный.

Следующая фишка — оформление кнопки градиентом с использованием всё тех же box-shadow. Разница с предыдущим примером будет лишь в том, что мы направим тени внутрь указав параметр inset.

dd .cntrls a {
  /* Force 3 inset shadows for emulate gradient background effect */
	-webkit-box-shadow: inset #c1c1c1 1px 1px 2px 3px, inset #cc99cc -1px -1px 20px 1px, inset #99ffff 2px 5px 99px 1px;
		-moz-box-shadow: inset #c1c1c1 1px 1px 2px 3px, inset #cc99cc -1px -1px 20px 1px, inset #99ffff 2px 5px 99px 1px;
			-o-box-shadow: inset #c1c1c1 1px 1px 2px 3px, inset #cc99cc -1px -1px 20px 1px, inset #99ffff 2px 5px 99px 1px;
				box-shadow: inset #c1c1c1 1px 1px 2px 3px, inset #cc99cc -1px -1px 20px 1px, inset #99ffff 2px 5px 99px 1px;
}

Здесь тоже всё довольно просто. три последовательно описанные тени, каждая со своим размахом и оттенком, направленные внутрь элемента, дадут нам вот такую красивую кнопку.

Естественно, пары подвижных теней и красивой кнопки нам недостаточно, чтобы сделать шаблон достаточно эффектным. Но есть в CSS такая отличная возможность, как использование спец-символов для вставки прямо в нужные места. Добавим несколько таких штуковин и раскрасим их по вкусу.

dd a.Author:before {
	content: '≡';
	padding: 0 8px 2px 4px;
	color: #5f9ea0;
}
 
dd .Date:before {
	position: relative;
	top: -2px;
	color: #006400;
	content: '› ';
}
 
.cntrls a:before {
	content: '‹∗ ';
	color: #dc143c;
}
.cntrls a:after {
	content: ' ♦';
	color: #006400;
}

Спецсимволы и псевдоэлементы в CSS3 — это лёгкая и отличная замена маленьким изображениям.

Как работают остальные вещи, вы можете посмотреть непосредственно в исходнике.

Резюме

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