Один из таких органичных и стильных способов оформления мы и рассмотрим далее. Сам способ легко применим и основан только на 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", которому мы и задали стили выше.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 - тень и ее цвет у вращающегося пункта списка.
Таким образом, структура создаваемого списка будет выглядеть следующим образом:
<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>В коде просто укажите собственные адреса и пропишите нужный текст, определив подходящее количество ссылок.
На этом все. Попсовенько и совсем не эпично, однако с некоторым вкусом.