Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.12.34.192
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Модератор форума: Hawk  
Стили CSS - создаем облако тегов с задаваемым в CSS размером
Сообщение оставлено 24.01.2010 в 19:24:10 | Сообщение #1
Автор: Крис Койер
Перевод: Всеволод Козлов

В свое время я уже делал подробный обзор и “палил” тему облаков тегов. Сегодня же мне хотелось бы продемонстрировать, как с помощью 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;  
}
 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика