Оформление тегов

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


Рассмотрим подробнее установку, которая состоит из нескольких шагов.

1. Находим в таблице стилей CSS класс, описывающий свойство тегов. Например:eTag

2. Вставляем код в таблицу стилей CSS:

/*поле со ссылкой*/
.eTag {
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
  background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
  background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
  background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
  background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    border-bottom: 1px solid #d99d38;
    border-radius: 0 3px 3px 0;
   -webkit-border-radius:0 3px 3px 0;
  -moz-border-radius:0 3px 3px 0;
  -o-border-radius:0 3px 3px 0;
   -ms-border-radius:0 3px 3px 0;
  
    border-right: 1px solid #d99d38;
    border-top: 1px solid #d99d38;
    box-shadow: 0 1px 0 #faeaba inset, 0 1px 1px rgba(0, 0, 0, 0.1);
     -ms-box-shadow:0 1px 0 #faeaba inset, 0 1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow:0 1px 0 #faeaba inset, 0 1px 1px rgba(0, 0, 0, 0.1);
   -webkit-box-shadow:0 1px 0 #faeaba inset, 0 1px 1px rgba(0, 0, 0, 0.1);
  -o-box-shadow:0 1px 0 #faeaba inset, 0 1px 1px rgba(0, 0, 0, 0.1);
  color: #996633;
    float: left;
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 7px 20px;
    padding: 6px 5px 1px 10px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    line-height: 12pt;
}
/* треугольничек */
.eTag:before {
   background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
 border-bottom: 1px solid #d99d38;
    border-left: 1px solid #d99d38;
    border-radius: 0 0 0 3px;
   content: "";
    height: 16px;
    left: -9px;
    position: absolute;
    top: 3px;
    transform: rotate(45deg);
    width: 16px;
    z-index: 1;
}
/* дырочка */
.eTag:after {
    background: none repeat scroll 0 0 #FBF0C2;
    border: 1px solid #d99d38;
    border-radius: 40px;
  box-shadow: 0 1px 0 #faeaba;
  content: "";
   height: 6px;
    left: -5px;
    position: absolute;
    top: 8px;
    width: 6px;
    z-index: 9999;
}
/* поле со ссылкой при наведении*/
.eTag:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
 
    border-color: #e1b160;
}
/* Треугольничек при наведении */
.eTag:hover:before {
     background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    border-color: #e1b160;
}
/*прячем лишние запятые */
.value {
    font-size: 0px;

line-height: 10pt !important;
}
/* подравниваем */
.e-tags {
    clear: both;
    margin: 2px;
    float: left;
}
/* для создания информера с тегами, что бы они не были в раскорячку */
.tagItem {
    float: left;
    display: inline;
    font-size: 0 !important;
}
  • Копируем исходный код css себе в блокнотик
  • Добавляем в нужное вам место кода class=”e-tags”
  • Если хотите, то перенесите код тегов на отдельную строку таблицы, что бы избежать скученности при большом количестве тегов

Цвета выбирайте сами под свой дизайн


предыдущий
следующий


Архивы

Рубрики

Друзья сайта

Метки

Яндекс.Метрика