Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  суббота, февраля 25, 2012  

Небольшое вращение списка меню с помощью CSS
С помощью вмешательства CSS можно выделить любой список ссылок или обычной текстовой информации в блоге.
Один из таких органичных и стильных способов оформления мы и рассмотрим далее. Сам способ легко применим и основан только на CSS.

Мы создадим небольшой список меню, при наведении на любой из пунктов которого будет происходить небольшое вращение выделенного пункта.
Благодаря этому, появляется возможность украсить эффектом трансформации любой аскетичный список ссылок.

Визуальное воплощение трансформации ссылок меню при наведении:



Стили CSS:
#spisok {  }
#spisok ul { list-style:none; }
#spisok ul li { font-family:Georgia,serif,Times; font-size:18px; }
#spisok ul li a { display:block; width:350px; height:28px; background-color:#5d9cef; border-left:5px solid #020099; border-right:5px solid #020099; padding-left:10px;
        text-decoration:none; color:#ffffff; }
#spisok ul li a:hover {  -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
        -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
        transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }
Данный код разместите в шаблоне блога перед участком ]]></b:skin>.

Здесь вы можете настроить нужное отображение по своему вкусу. Для изменения цвета текста и списка в целом используйте онлайн-генератор цвета.
Некоторые из настраиваемых значений:

width:350px - ширина всего блока ссылок;
height:28px - высота одного трансформирующегося пункта списка;
background-color:#5d9cef - цвет всего списка;
color:#ffffff - цвет текста;
border-left:5px solid #020099; border-right:5px solid #020099 - ширина и цвет окаймовки по бокам;
box-shadow:10px 10px 20px #000000 - тень и ее цвет у вращающегося пункта списка.
Теперь, чтобы оформить нужный участок текста или элемента меню, достаточно добавить к нужным строкам класс "spisok", которому мы и задали стили выше.

Таким образом, структура создаваемого списка будет выглядеть следующим образом:
<div id="spisok">
<ul>
<li><a href="#">Меню</a></li>
<li><a href="#">Меню 2</a></li>
<li><a href="#">Меню 3</a></li>
<li><a href="#">Меню 4</a></li>
<li><a href="#">Меню 5</a></li>
</ul>
</div>
В коде просто укажите собственные адреса и пропишите нужный текст, определив подходящее количество ссылок.

На этом все. Попсовенько и совсем не эпично, однако с некоторым вкусом.



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.