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

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

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

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

Дизайн тега для WordPress

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);
}

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

Красивый тег (результат)

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

Комментарии (24)
  1. 1

    отлично, а главное просто. большое спасибо за идею ;-)

  2. 2
    ScorpAL

    А вот и живой пример.

    http://www.toyota-club.by/car/toyota-corolla/

  3. 5

    Я пробовал, но у меня не получается вывести такое оформление через функцию , стили ссылок перекрывают стиль div’a.

  4. 6
    alexpts

    Прикольно! Отличная штука, выглядит достойно :)

  5. 7
    Андрей

    в данном трюке не понятен принцип работы псевдоселекторов.Объясните подробнее пожалуйста.

  6. 8

    Красивое оформление, спасибо за информацию. С border оно конечно попроще будет, (походу на toyota-club именно так и сделано), но не так изящно, а тут прам и градиент и дырочка :) В общем, красиво и познавательно.

  7. 11

    Блин, Ваш сайт для меня просто находка :) я сейчас как раз взялся за изучение верстки, спасибо вам большое!!! Добавил сайт в закладки буду изучать подробно все что здесь есть. Да кстати, хочется спросить, заметил у вас закрыты комментарии от индексации, зачем? Это же дополнительный контент на сайт.

  8. 14
    Viktor

    Привет Dimox,
    Спасибо классная Статья, давно искал такое решение.
    background картинкой не очень, а вот на чистом CSS просто отлично.

    С уважением,
    Виктор

  9. 15
    Mark

    только это CSS 3, а так все нормально…

  10. 16

    Я всё ещё предпочитаю использовать backgroung image из-за бестолкового IE.
    Много у вас тут полезной информации, спасибо!

  11. 17
    Scampiqq

    Очень красиво смотриться, кроме того можно впихнуть под дизайн сайта. Еще можно сделать такой же вывод тегов в сайдбаре, это типо 3д облака, только в виде тегов. Как я помню, такая фишка используется в движках LiveStreet.

  12. 18

    Спасибо за пример css-верстки такого типа тегов. Помучаться пришлось немного

  13. 19
    Flector

    а нет примера не с желтым, а с любым другим цветом?
    сам попробовал цвета подобрать, ни не дизайнер — хрень выходит :(
    хотелось бы серую кнопку, в идеале серебро.
    именно в css, а не картинкой.

    случайно не знаете сайтов, где этот код используется?

  14. 21
    Flector

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

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

  15. 22
    Flector

    Сделал плагин облака тегов для WordPress на основе этой картинки и частично этого css-кода. Взять можно в репозитории, называется Cool Tag Cloud. Дмитрий — спасибо!

  16. 23
    Алекс

    Если использовать для фона PNG с прозрачными краями и полу-прозрачной тенью, то через фон :afte просвечивает основной фон тега. Я решил эту проблемку вынесением :afte за пределы основного блока, убрав параметры — top: 0; right: 0;.
    Сответственнj, убираем и поле справа — padding: 0 0 0 20px;
    Для того, чтобы теги не «слипались» добавил отступы — margin: 2px 4px;

    Кстати, white-space: nowrap; на мой взгляд здесь лишний, т.к. элемент блочный, а значит текст внутри тега переноситься по строчкам не будет.

    Заодно выражаю огромную признательность за такие замечательные подсказки в решениях по дизайну.

  17. 24
    Uki

    Спасибо за статью. Сделала себе такие метки,только в Мозиле цвет текста не становится color: #963, остается как все ссылки на сайте, в остальных браузерах отображается правильно. А когда наводишь курсор на метку, цвет меняется как надо.