» » >
5 вариантов цветового решения тегов uCoz
·
28.09.2013, 22:29

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

И так для начала, нам следует создать нужным нам информер, для этого заходим в Админ панель => Инструменты => Информеры => Создать информер => Теги

в настройках которого:

- ставим галочку Список тегов
- выбираем нужные модули
- выставляем количество тегов 25

и устанавливаем системную переменную данного информера в нужное место на странице сайта:

HTML

$MYINF_1$

А ниже выбираем один из шести вариантов стиля для тегов uCoz.

1 - Красный вариант:
CSS-Code

/* Облако тегов v.2.0 Красный вариант
------------------------------------------*/
.tagItem {
  float:left;
  color:#fff;
  margin:7px0px0px10px;  
  padding:5px10px5px0px;  
  background: url(http://ucoz-helper.ucoz.com/knopki/fon_tagItem.png) right no-repeat;  
  font:10pxVerdana,Arial,Helvetica, sans-serif; text-shadow:1px1px1px#912950;  
}

.tagItem a:link,
.tagItem a:visited {
  float:left;
  color:#555;  
  text-shadow:1px1px1px#fff;  
  background:#fff!important;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0,#fdfdfd), color-stop(1, #f5f5f5))!important;
  background:-moz-linear-gradient(top,#fdfdfd 1%, #f5f5f5 100%)!important;
  background:-o-linear-gradient(#fdfdfd, #f5f5f5)!important;  
  margin:-5px5px-5px0px;  
  padding:5px10px5px10px;  
  border:1px solid #a3a3a3;  
  -webkit-border-radius:3px0px0px3px;  
  -moz-border-radius:3px0px0px3px;  
  border-radius:3px0px0px3px;  
}

.tagItem a:active {
  box-shadow:inset 0px0px3px#910f40!important;  
  -webkit-box-shadow:inset 0px0px3px#910f40!important;
  -moz-box-shadow:inset 0px0px3px#910f40!important;
}

.tagItem a:hover {
  color:#fff;
  text-shadow:1px1px1px#ca4377;  
  border:1px solid #ca4377;  
  background:#fc5b98!important;
}
2 - Синий вариант:

CSS-Code

/* Облако тегов v.2.0 Синий вариант
------------------------------------------*/
.tagItem {
  float:left;
  color:#fff;
  margin:7px0px0px10px;  
  padding:5px10px5px0px;  
  background: url(http://ucoz-helper.ucoz.com/knopki/fon_tagItem1.png) right no-repeat;  
  font:10pxVerdana,Arial,Helvetica, sans-serif; text-shadow:1px1px1px#4576c3;  
}

.tagItem a:link,
.tagItem a:visited {
  float:left;
  color:#555;  
  text-shadow:1px1px1px#fff;  
  background:#fff!important;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0,#fdfdfd), color-stop(1, #f5f5f5))!important;
  background:-moz-linear-gradient(top,#fdfdfd 1%, #f5f5f5 100%)!important;
  background:-o-linear-gradient(#fdfdfd, #f5f5f5)!important;  
  margin:-5px5px-5px0px;  
  padding:5px10px5px10px;  
  border:1px solid #a3a3a3;  
  -webkit-border-radius:3px0px0px3px;  
  -moz-border-radius:3px0px0px3px;  
  border-radius:3px0px0px3px;  
}

.tagItem a:active {
  box-shadow:inset 0px0px3px#134087!important;  
  -webkit-box-shadow:inset 0px0px3px#134087!important;
  -moz-box-shadow:inset 0px0px3px#134087!important;
}

.tagItem a:hover {
  color:#fff;
  text-shadow:1px1px1px#4576c3;  
  border:1px solid #4576c3;  
  background:#69a0f5!important;
}
3 - Зелёный вариант:
CSS-Code

/* Облако тегов v.2.0 Зелёный вариант
------------------------------------------*/
.tagItem {
  float:left;
  color:#fff;
  margin:7px0px0px10px;  
  padding:5px10px5px0px;  
  background: url(http://ucoz-helper.ucoz.com/knopki/fon_tagItem2.png) right no-repeat;  
  font:10pxVerdana,Arial,Helvetica, sans-serif; text-shadow:1px1px1px#449425;  
}

.tagItem a:link,
.tagItem a:visited {
  float:left;
  color:#555;  
  text-shadow:1px1px1px#fff;  
  background:#fff!important;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0,#fdfdfd), color-stop(1, #f5f5f5))!important;
  background:-moz-linear-gradient(top,#fdfdfd 1%, #f5f5f5 100%)!important;
  background:-o-linear-gradient(#fdfdfd, #f5f5f5)!important;  
  margin:-5px5px-5px0px;  
  padding:5px10px5px10px;  
  border:1px solid #a3a3a3;  
  -webkit-border-radius:3px0px0px3px;  
  -moz-border-radius:3px0px0px3px;  
  border-radius:3px0px0px3px;  
}

.tagItem a:active {
  box-shadow:inset 0px0px3px#267507!important;  
  -webkit-box-shadow:inset 0px0px3px#267507!important;
  -moz-box-shadow:inset 0px0px3px#267507!important;
}

.tagItem a:hover {
  color:#fff;
  text-shadow:1px1px1px#449425;  
  border:1px solid #5db23b;  
  background:#70d54a!important;
}
4 - Оранжевый вариант:
CSS-Code

/* Облако тегов v.2.0 Оранжевый вариант
------------------------------------------*/
.tagItem {
  float:left;
  color:#fff;
  margin:7px0px0px10px;  
  padding:5px10px5px0px;  
  background: url(http://ucoz-helper.ucoz.com/knopki/fon_tagItem3.png) right no-repeat;  
  font:10pxVerdana,Arial,Helvetica, sans-serif; text-shadow:1px1px1px#a7672b;  
}

.tagItem a:link,
.tagItem a:visited {
  float:left;
  color:#555;  
  text-shadow:1px1px1px#fff;  
  background:#fff!important;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0,#fdfdfd), color-stop(1, #f5f5f5))!important;
  background:-moz-linear-gradient(top,#fdfdfd 1%, #f5f5f5 100%)!important;
  background:-o-linear-gradient(#fdfdfd, #f5f5f5)!important;  
  margin:-5px5px-5px0px;  
  padding:5px10px5px10px;  
  border:1px solid #a3a3a3;  
  -webkit-border-radius:3px0px0px3px;  
  -moz-border-radius:3px0px0px3px;  
  border-radius:3px0px0px3px;  
}

.tagItem a:active {
  box-shadow:inset 0px0px3px#824b18!important;  
  -webkit-box-shadow:inset 0px0px3px#824b18!important;
  -moz-box-shadow:inset 0px0px3px#824b18!important;
}

.tagItem a:hover {
  color:#fff;
  text-shadow:1px1px1px#a7672b;  
  border:1px solid #ca8443;  
  background:#e99241!important;
}
5 - Бирюзовый вариант:
CSS-Code

/* Облако тегов v.2.0 Бирюзовый вариант
------------------------------------------*/
.tagItem {
  float:left;
  color:#fff;
  margin:7px0px0px10px;  
  padding:5px10px5px0px;  
  background: url(http://ucoz-helper.ucoz.com/knopki/fon_tagItem4.png) right no-repeat;  
  font:10pxVerdana,Arial,Helvetica, sans-serif; text-shadow:1px1px1px#1e959e;  
}

.tagItem a:link,
.tagItem a:visited {
  float:left;
  color:#555;  
  text-shadow:1px1px1px#fff;  
  background:#fff!important;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0,#fdfdfd), color-stop(1, #f5f5f5))!important;
  background:-moz-linear-gradient(top,#fdfdfd 1%, #f5f5f5 100%)!important;
  background:-o-linear-gradient(#fdfdfd, #f5f5f5)!important;  
  margin:-5px5px-5px0px;  
  padding:5px10px5px10px;  
  border:1px solid #a3a3a3;  
  -webkit-border-radius:3px0px0px3px;  
  -moz-border-radius:3px0px0px3px;  
  border-radius:3px0px0px3px;  
}

.tagItem a:active {
  box-shadow:inset 0px0px3px#14767d!important;  
  -webkit-box-shadow:inset 0px0px3px#14767d!important;
  -moz-box-shadow:inset 0px0px3px#14767d!important;
}

.tagItem a:hover {
  color:#fff;
  text-shadow:1px1px1px#1e959e;  
  border:1px solid #43c1ca;  
  background:#44dde9!important;
}

На этом всё, спасибо за внимание!

Категория: Вид Тегов и Кнопок | Добавил: tashkent97
Просмотров: 616 | Загрузок: 316 | Источник: center-dm.ru | Рейтинг: 5.0/1
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<