Стили CSS - создаем облако тегов с задаваемым в CSS размером - Форум вебмастеров - как создать сайт бесплатно на UCOZ - uCozWeBer - скрипты для uCoz, шаблоны для uCoz

Главная Форум Регистрация Правила Группы Журналистам
Что ищем?
Рекламный блок
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: NeedL  
Стили CSS - создаем облако тегов с задаваемым в CSS размером
Sanek94Дата: Четверг, 17.06.2010, 12:51 | Сообщение # 1
Сержант
Сообщений: 21
Репутация: 0
Автор: Крис Койер
Перевод: Всеволод Козлов

В свое время я уже делал подробный обзор и “палил” тему облаков тегов. Сегодня же мне хотелось бы продемонстрировать, как с помощью CSS можно задавать размер области выделения тега при наведении на него мышки.

Стили CSS - создаем облако тегов с задаваемым в CSS размером области выделения
Фрагмент HTML кода

Code
<ul>    
<li><a class="size1" href=#">adobe</a></li>    
<li><a class="size2" href=#">animation</a></li>    
<li><a class="size3" href=#">arts</a></li>    
<li><a class="size4" href=#">bizarre</a></li>    
<li><a class="size5" href=#">blogs</a></li>    
<li><a class="size6" href=#">books</a></li>    
...и т.д.    
</ul>

Фрагмент CSS кода
Code
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;    
}
MDLESДата: Четверг, 17.06.2010, 20:44 | Сообщение # 2
Лейтенант
Сообщений: 50
Репутация: 0
Sanek94, спасибо
  • Страница 1 из 1
  • 1
Поиск:
Статистика Форума
Последнии темы Читаемые темы Лучшии пользователи Новые пользователи
Файлообменник. Заработок на продаже файлов
Куплю, обмен швейцарские франки 8 серии, старые английские фунты и др
Задроот :D
50 самых смешных запросов Яндекса
Переписка в скайпе VIP'а мегасофта xDD
Взломаем копроративные почты \ Взломаем любые почты
Светлый мини профиль
Игровой Сайт и Форум
Очень хорошие флэш радио к вам на сайт
Форма входа
Cчитаем до 1000
Флуд смайлами
Общение
Конкурс на лучшую карту в игре Free Rider 2
Оцените сайт tsa
Прогоню ваш сайт
Отними 5
Оцените аватар
Угодай цыфры Получишь 7 знак =)
оцените сайт
BRAGAhsNeedLx390M-SlorderX-LINEGomegapriuma4okMulltykill roterbbagiwe9129jt808739Ecnaluawadgremgennadrradistnashirdedok