воскресенье, 5 февраля 2017 г.

Оформление облака тегов на сайте в виде ярлыков с помощью CSS3

08:16 By , , No comments


Здравствуйте, друзья. На одном из забугорных сайтов обнаружил красивое оформление облака тегов в виде ярлыков. И сразу же задумался о том, как сделать такое на своем блоге. Сначала показалось, что реализовано все на jQuery, потому что теги очень плавно реагировали на наведение, но потом оказалось, что начистом CSS3 и HTML. Смотрите пример.
Помнится когда-то давно в WordPress был плагин облака тегов, в виде карусели, но он работал на флеш и сейчас я его уже нигде не вижу, видимо уже неактуален. Теперь можно создать не менее красивые теги, оформленные на HTML. И для этого не нужны никакие модули. Нужно всего лишь задать определенные CSS стили и ваш ресурс преобразится и заиграет новыми красками. Не важно на чем он функционирует, на Joomla, uCoz или Modx. Трудиться будем непосредственно с кодом.

Готовые CSS стили для облака тегов

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

.post-tag{
  margin:-30px 0 35px
}
.post-tag a{
  background-color:#aaa;
  border-radius:0 2px 2px 0;
  color:#fff;
  display:inline-block;
  font-size:11px;
  line-height:13px;
  margin:0 0 2px 10px;
  padding:4px 7px 3px;
  position:relative;
  text-transform:uppercase; 
  transition: 0.2s linear
  -webkit-transition: 0.2s linear; 
  -moz-transition: 0.2s linear; 
  -o-transition: 0.2s linear; 
}
.post-tag a:before{
  border-top:10px solid transparent;
  border-right:8px solid #aaa;
  border-bottom:10px solid transparent;
  content:"";
  height:0;
  position:absolute;
  top:0;left:-8px;
  width:0;
  transition: 0.2s linear; 
  -webkit-transition: 0.2s linear; 
  -moz-transition: 0.2s linear; 
  -o-transition: 0.2s linear; 
}
.post-tag a:after{
  background-color:#fff;
  border-radius:50%;
  content:"";
  height:4px;
  position:absolute;
  top:8px;
  left:-2px;
  width:4px
}
.post-tag a:hover{
  background:#444;
  color:#FFF
}
.post-tag a:hover:before{
  border-right-color:#444
}
Это уже готовые CSS стили для облака тегов, которые будут дополнительными. Их можно вставить в ваш файл таблицы. А Выводить на странице их нужно таким образом:
<p class="post-tag"><a href="#">Надпись на ярлыке</a></p>
Чтобы сделать красивое облако тегов для сайта и, главное, чтобы они гармонично вписались в ваш дизайн, стили оформления, можно изменять, а именно цветовую схему по вашему усмотрению. Для этого используйте таблицу безопасных цветов. Если вы так же, как и я ведете дневник на WordPress и хотите все это хозяйство внедрить туда, то нужно заглянуть в код и посмотреть какие классы прописаны к текущим тегам и заменить все параметры CSS стилей на новые. Если плохо в этом разбираетесь, можете написать мне и, возможно я вам помогу. ) А пока скачайте архив с готовыми стилями.

0 коммент.:

Отправить комментарий