Облако тегов становится все более массовым явлением которое одновременно является и веянием моды и важным элементом навигации.
Назначение заключается в том, что для навигации по сайтам с лентой публикаций приписываются произвольные теги, обозначающие суть публикации, а размер названий тегов в облаке указывает на их значимость.
Сегодня я приведу пример оформления облака тэгов внешний вид которого вы можете видеть ниже.
Облако тегов или Туча ярлыков или Облако меток (англ. tag cloud) — визуальное представление списка ярлыков (или категорий). Частота упоминаний, поисков, ссылок в интернете с определенного сайта неких слов, терминов, имен, отображается на специальной странице в виде изображения этих слов в формате гиперссылок. Размер изображения тем больше, чем выше релевантность данного слова (термина, имени). - ru.wikipedia.org
Настроим различные классы оформления в CSS примерно таким образом:
ul {
margin-top: 50px;
list-style-type: none;
}
li {
float: left;
}
ul li a {
text-decoration: none;
line-height: 2.3em;
}
ul li a.size1 {
color: #666;
padding: 2px;
}
ul li a.size1:hover {
background-color: #999;
color: white;
}
ul li a.size2 {
color: #912600;
padding: 12px;
}
ul li a.size2:hover {
background-color: #cc3500;
color: white;
}
ul li a.size3 {
color: #877900;
padding: 18px;
}
ul li a.size3:hover {
background-color: #d8c100;
color: white;
}
ul li a.size4 {
color: #1d6c01;
padding: 8px;
}
ul li a.size4:hover {
background-color: #2daf00;
color: white;
}
ul li a.size5 {
color: #004e6b;
padding: 6px;
}
ul li a.size5:hover {
background-color: #007ead;
color: white;
}
ul li a.size6 {
color: #430069;
padding: 24px;
}
ul li a.size6:hover {
background-color: #7600b9;
color: white;
}
Применим классы оформления к списку категорий примерно так:
Ёмаё...
Почему код не льзя полностью вставить в сообщение сюда?!!
Пишу весь, жмиак отправить, а он тут часть его отображается.....
Антон - 21-01-10 01:01:43
Всем доброго времени суток!
Всё правильно сказал автор, это облако тегов.
Если кто не в курсе, их разновидность очень большая. Тут дело вкуса...
Если кто, хочет, чтобы летало и крутилось как 3D прошу ниже код (Юзайте на здоровье) (Тапком не бейте если не получится мне его сюда вставить)
------------------------------------------------
КОД:
addVariable("tagcloud", "Название темыНазвание темыНазвание темыНазвание темыНазвание темыНазвание темыНазваниеНазвание темыНазвание темыНазваниеНазваниеНазваниеНазвание темыНазваниеНазвание темыНазвание темыНазвание темыНазвание темыНазвание темыНазвание темы");widget_so.
--------------------------------------
Дополнение (пояснения)
"#FFFFFF" Это фон окна, по умолчанию он белый.
0x81A8C4 Цвет текста, меняем только 81A8C4.
Про стайл, 12 это размер текста.
"240", "240", "9" Это размеры окна облака... и 9 это максимальная версия Flash плеера которая необходима для отображения облака.
Dmitriy Kravchenko - 13-01-10 23:01:01
собственно, 2Mixa, я думаю если ты воспользуешья генератором кода, то кто те мешает в самом тэг описывать весь этот эм... стиль, конечно многовато кода вылезет ...
2admin
Может тебе понадобится класс для работы с наборами ид и слекторов из css файла )
так, может улучшишь )
http://www.tspider.net/works/css.inc
Я кстати ишу собственный фреймворк ) с расширениями на классовой основе. Если бу интересно, могу поделиться )
Mapkc - 7-12-09 23:12:53
А мне понравилось ! +)
Oleg - 12-07-09 12:07:57
ya - 9-06-08 19:06:44
Это разве облако тегов ???7
Это таблица просто разукрашенная... :(
автар. выпей йаду.
ххаа ты смешон
Антон - 26-04-09 15:04:20
Идея хороша. Просто, надежно, быстро и эффективно. Admin, налей яду господину Ya.
Dima - 18-06-08 19:06:02
ya +1. Это не облако тегов. Это раскраска.
admin - 10-06-08 11:06:00
Кому как… во всяком случае НЕобычно … и табличкой тут и не пахнет :-)
ya - 9-06-08 19:06:44
Это разве облако тегов ???7
Это таблица просто разукрашенная... :(
автар. выпей йаду.
Mixa - 6-05-08 21:05:01
Все хорошо, только непонятно как заставить облако работать динамически - не буду ж вручную к каждому тагу приписывать класс. Как это реализовать, скажем, на wordpress?
wmas - 4-02-08 20:02:08
Хороший вариант, я вообще с CSS не сильно дружу... очень сложно с DIV'ами и с этими списками, хотя и хорошо урезает объем страницы ;) Особенно понравилась идея с разноцветной подсветкой... надо будет попробовать, если удасцо себя заставить 8)
Написать комментарий
ВНИМАНИЕ: Все поля необходимо заполнить
Контакты
Моб. тел.: 8-097-99-22-00-6 E-mail:tarasishe@gmail.com Портфолио работ:http://mij.org.ua/ Деятельность: Создание сайтов, сайтов - визиток в Харькове, поддержка и размещение в Интернет.
ouawuqext - 9-11-11 10:11:37
SUwV5R phunierwfnre, [url=http://hfadccvuagov.com/]hfadccvuagov[/url], [link=http://ltpnrcnjvrcf.com/]ltpnrcnjvrcf[/link], http://zlgrgqonhxve.com/