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

Красивые теги для сайта

Замечательный дизайнер 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);
}

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

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

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

Комментарии (25)

  1. 11 января 2013 г. в 17:04

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

  2. ScorpAL
    11 января 2013 г. в 17:32

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

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

    1. 11 января 2013 г. в 18:37 / ответ на коммент ScorpAL

      При просмотре в Опере косяк с углом.

  3. 12 января 2013 г. в 15:52

    НЕ получилось

  4. 12 января 2013 г. в 20:50

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

  5. alexpts
    14 января 2013 г. в 09:06

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

  6. Андрей
    21 января 2013 г. в 14:34

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

  7. 29 января 2013 г. в 02:21

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

    1. 29 января 2013 г. в 11:59 / ответ на коммент MagentaWAVE

      Кстати, еще решил немного дополнить.
      Про 135 градусов. Дело в том, что поворот в свойствах с префиксами поворот происходит из центра элемента, в то время как в стандартном свойстве поворот происходит от верхнего правого угла, по-этому и получается 135 => 90 + 45
      А вот на счет IE, так у него, как обычно:), есть фильтры для этого дела, в 7 и ниже применять их нет смысла, т.к. псевдоклассы :after и :before
      там не катят, а вот в 8-ом можно и применить, вот надыбал буржуйский ресурс, который это дело обсчитывает, может кому и пригодится
      http://www.useragentman.com/IETransformsTranslator/

      1. 29 января 2013 г. в 12:10 / ответ на коммент MagentaWAVE

        Спасибо за информацию.

  8. 6 февраля 2013 г. в 04:32

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

    1. 6 февраля 2013 г. в 10:32 / ответ на коммент Виталий

      Да кстати, хочется спросить, заметил у вас закрыты комментарии от индексации, зачем?

      Не закрыты. С чего вы взяли?

      1. Juniormax
        10 марта 2013 г. в 01:20 / ответ на коммент Dimox

        Не закрыты.

        Закрыты, но только ссылки :)

  9. Viktor
    13 февраля 2013 г. в 14:44

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

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

  10. Mark
    3 марта 2013 г. в 15:54

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

  11. 19 марта 2013 г. в 01:32

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

  12. Scampiqq
    7 октября 2013 г. в 22:48

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

  13. 11 июня 2014 г. в 17:27

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

  14. Flector
    24 августа 2014 г. в 00:37

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

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

    1. 24 августа 2014 г. в 09:35 / ответ на коммент Flector

      В самом начале статьи есть ссылка, где я брал исходный дизайн. Там только один вариант цвета.

  15. Flector
    24 августа 2014 г. в 23:31

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

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

  16. Flector
    1 октября 2014 г. в 05:13

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

  17. Алекс
    9 апреля 2015 г. в 14:55

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

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

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

  18. Uki
    7 июля 2016 г. в 03:48

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

  19. 20 октября 2018 г. в 19:33

    Установил себе на сайт, спасибо за творческий подход!
    Пример можно посмотреть на этой страничке: http://fotonature.ru/park_livadijskogo_dvorca_na_beregu_morya

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код