Верстка красивых тегов для сайта + бонус

Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта.

Для начала необходимо приготовить заведомо длинное изображение тега, которое с уверенностью подойдет для тегов разной длины. Я сделал вот такое:

HTML-код тега – это простая ссылка:

<div class="tags">
	<a href="#">тег1</a>
	<a href="#">тег2</a>
	<a href="#">тег3</a>
</div>

Если бы мы при верстке стали учитывать устаревший браузер Internet Explorer 7, то понадобилось бы использовать дополнительный вложенный тег:

<a href="#"><span>тег</span></a>

Однако IE7 мы учитывать не будет, поэтому на помощь нам придет псевдоселектор :after.

CSS-код

Ссылку сделаем блочной в строке, уберем подчеркивание, запретим перенос текста на новую строку, добавим тень для красоты, внутренние отступы слева и справа и укажем фон тега (поскольку мы используем свойство display: inline-block, то длина блока с тегом равна длине текста, плюс отступы слева и справа, соответственно правая часть фона не будет видна):

.tags a {
	display: inline-block;
	height: 25px;
	background: url(tag.png) no-repeat;
	font: bold 11px/22px Arial, sans-serif;
	color: #963;
	text-decoration: none;
	padding: 0 8px 0 20px;
	text-shadow: 1px 1px 0 rgba(256,256,256,0.4);
	white-space: nowrap;
	position: relative;
}

Это дает нам следующую картину:

Теперь добавим правую часть фона. Это мы сделаем с помощью псевдоселектора :after, который позволяет нам отказаться от дополнительного тега. Позиционируем его абсолютно в правой части тега на всю его высоту и указываем правую часть изображения:

.tags a:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 8px;
	height: 25px;
	background: url(tag.png) 100% 0 no-repeat;
}

И получаем нужный нам результат:

Остается только добавить эффект при наведении курсора на ссылку:

.tags a:hover {
	color: #FFF;
	text-shadow: -1px -1px 0 rgba(153,102,51,0.3);
}

Бонус — верстаем красивый тег на чистом CSS

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

Полноценно это будет выглядеть в следующий браузерах: Opera, Google Chrome, Firefox и Safari. В Internet Explorer 9 тег останется без градиента, но такой его внешний вид все-таки приемлем. А вот в IE8 и ниже тег выглядит уже неподобающе.

Начинаем с правой прямоугольной части. Указываем градиентный фон, задаем цвета границ, добавляем эффекты внешней и внутренней тени для блока и тень для текста, внешние и внутренние отступы (внешний отступ справа в 10px указан для того, чтобы оставить место под треугольник соседнего тега):

.tags a {
	display: inline-block;
	height: 21px;
	margin: 0 10px 0 0;
	padding: 0 7px 0 14px;
	white-space: nowrap;
	position: relative;

	background: -moz-linear-gradient(top, #fed970 0%, #febc4a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed970), color-stop(100%,#febc4a));
	background: -webkit-linear-gradient(top, #fed970 0%,#febc4a 100%);
	background: -o-linear-gradient(top, #fed970 0%,#febc4a 100%);
	background: linear-gradient(to bottom, #fed970 0%,#febc4a 100%);
	background-color: #FEC95B;

	color: #963;
	font: bold 11px/20px Arial, Tahoma, sans-serif;
	text-decoration: none;
	text-shadow: 0 1px rgba(255,255,255,0.4);

	border-top: 1px solid #EDB14A;
	border-bottom: 1px solid #CE922E;
	border-right: 1px solid #DCA03B;
	border-radius: 1px 3px 3px 1px;
	box-shadow: inset 0 1px #FEE395, 0 1px 2px rgba(0,0,0,0.21);
}

Получается следующее:

Теперь с помощью псевдоселектора :before создадим левый треугольник. Изначально это квадрат (с тем же самым градиентом, только повернутым на 45 градусов, границами и тенью), который далее будет трансформирован в треугольник:

.tags a:before {
	content: '';
	position: absolute;
	top: 5px;
	left: -6px;
	width: 10px;
	height: 10px;

	background: -moz-linear-gradient(45deg, #fed970 0%, #febc4a 100%);
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#fed970), color-stop(100%,#febc4a));
	background: -webkit-linear-gradient(-45deg, #fed970 0%,#febc4a 100%);
	background: -o-linear-gradient(45deg, #fed970 0%,#febc4a 100%);
	background: linear-gradient(135deg, #fed970 0%,#febc4a 100%);
	background-color: #FEC95B;

	border-left: 1px solid #EDB14A;
	border-bottom: 1px solid #CE922E;
	border-radius: 0 0 0 2px;
	box-shadow: inset 1px 0 #FEDB7C, 0 2px 2px -2px rgba(0,0,0,0.33);
}

Здесь стоит отметить, что webkit рисует градиенты в обратную сторону, поэтому для него указано минусовое значение: -45deg. Кроме того, вы можете заметить, что в беспрефиксном свойстве градиента указаны не 45, а 135 градусов. Я не понял в этом логики (видимо, чего-то не знаю), но оно здесь должно быть именно таким для правильно отображения.

Далее.

Чтобы сделать из квадрата треугольник, мы используем свойство transform со значением rotate(45deg). Однако этого недостаточно – необходимо также, чтобы он имел тупой угол. Данная задача решается путем масштабирования по оси Y с помощью значения scale для transform:

.tags a:before {
	-webkit-transform: scale(1, 1.5) rotate(45deg);
	-moz-transform: scale(1, 1.5) rotate(45deg);
	-ms-transform: scale(1, 1.5) rotate(45deg);
	transform: scale(1, 1.5) rotate(45deg);
}

В результате получим почти законченный дизайн тега:

Остался последний штрих – сделать дырку в нашем теге. В этом нам поможет еще один псевдоселектор – :after. Просто-напросто создаем маленький квадрат, у которого закругляем углы настолько, что он превращается в круг. Ну и для создания эффекта объемности добавляем тень:

.tags a:after {
	content: '';
	position: absolute;
	top: 7px;
	left: 1px;
	width: 5px;
	height: 5px;
	background: #FFF;
	border-radius: 4px;
	border: 1px solid #DCA03B;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 1px 1px rgba(0,0,0,0.21);
}

Ура! В итоге получился практически идентичный дизайн тега, который изображен в первом изображении к данному посту:

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