Archie Goodwin

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

Имеется перечень тегов к материалу (HTML-код):

<a href="/search/%D0%B8%D0%B3%D1%80%D1%8B%20PC/" rel="nofollow" class="eTag">игры PC</a>
<a href="/search/%D0%90%D0%9D%D0%9E%D0%9D%D0%A1/" rel="nofollow" class="eTag">АНОНС</a> 
<a href="/search/2014/" rel="nofollow" class="eTag">2014</a> 
<a href="/search/%D0%BD%D0%BE%D0%B2%D0%BE%D1%81%D1%82%D0%B8/" rel="nofollow" class="eTag">новости</a> 
<a href="/search/%D0%9E%D0%B6%D0%B8%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5/" rel="nofollow" class="eTag">Ожидание</a> 
<a href="/search/%D0%A2%D1%80%D0%B5%D0%B9%D0%BB%D0%B5%D1%80/" rel="nofollow" class="eTag">Трейлер</a>

Адаптация

Как видите, это обычный набор ссылок, который обьединяет то, что у каждой ссылки присутствует класс eTag. Список тегов с таким классом генерируется в CMS Ucoz, так как код стиля будет написан под этот класс, можно сказать, что данный набор стилей "заточен" под эту CMS.

Это не значит, что эти стили не подходят или не будут работать на других CMS, любая другая CMS также генерирует список тегов в виде набора ссылок, которые обьединены одним классом. То есть, чтобы стиль заработал нужно изменить класс eTag в коде, который представлен ниже, на тот класс, который задается вашей CMS. К примеру, в Wordpress список тегов к материалу обьединяется в блок с классом post-tag, что значит что нужно заменить везде в коде, где встречается надпись .eTag (аж целых три раза :) ) на надпись .post-tag a.

Собственно, код CSS, стиль для меток к материалу:

<style>
.eTag{
 background: #48bbff;
 border-radius: 0 3px 3px 0;
 padding: 5px 10px 5px 8px;
 position: relative;
 color: #fff;
 display:inline-block;
 text-decoration:none;
 font-family:Arial;
 font-size:14px;
 margin:3px 0 3px 20px;
 box-shadow:2px 2px 2px rgba(0,0,0,0.15);
}

/* Треугольник */
.eTag:before { 
 content: ''; 
 position: absolute;
 left: -13px; 
 bottom: 0px; 
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 13px 13px 13px 0;
 border-color: transparent #48bbff transparent transparent;
}

/* "Дырка" для бирки*/
.eTag:after {
 content:'';
 background: #fff;
 width:5px;
 height:5px;
 border-radius:5px;
 display:block;
 position: absolute; /* Абсолютное позиционирование */
 left: -2px; top: 11px; /* Положение треугольника */
}

/* Тег при выделении */
.eTag:hover {
 box-shadow:inset -1px 0 2px rgba(0,0,0,0.15);
 text-shadow:1px 1px 1px rgba(0,0,0,0.2);
 color:#fff;
}
</style>

Напомню, что CSS стили лучше всего вставлять между тегами head, но можно и в пределах тегов body.

Как это реализовано?

Чтобы сделать метку к материалу в виде симпатичной бирки нам потребовалось:

1. Превратить ссылку в кликабельную кнопку

2. Нарисовать треугольник с помощью стиля border и аккуратно подставить его слева под нашу кнопку

3. Нарисовать кружочек с помощью border-radius, который был бы "бубликом" для нашей метки и подставить его между треугольником и кнопкой

В случае если хочется использовать другой цвет предлагаются дополнительные "темы":

Сиреневый - tPurple

<style>
.tPurple a {background: #df2fff !important;}
.tPurple a:before {border-color: transparent #df2fff transparent transparent !important;}
</style>

Салатовый - tGreen

<style>
.tGreen a{background: #3cba0b !important;}
.tGreen a:before {border-color: transparent #3cba0b transparent transparent !important;}
</style>

Желтый - tYellow

<style>
.tYellow a {background: #fbcb25 !important;}
.tYellow a:before {border-color: transparent #fbcb25 transparent transparent !important;}
</style>

Тёмно-серый - tGray

<style>
.tGray a{background: #6a6a6a !important;}
.tGray a:before {border-color: transparent #6a6a6a transparent transparent !important;}
</style>

Чтобы активировать одну из представленных выше цветовых тем, необходимо:

1. Добавить код темы к основному коду CSS

2. Заключить список тегов / меток в div с классом служащим названием для темы (например, салатовый - tGreen):

<div class="tGreen"> код генератора тегов </div>