Стильное плавающее меню на CSS3

flymenu.gif

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

ДЕМО / СКАЧАТЬ ФАЙЛЫ

Для реализации применяется эффект тени (shadow) и анимация (transition). В стилях это прописано непосредственно для пунктов списка li (для разных браузеров своя запись):

-webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
-moz-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
-webkit-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;

Для них же используется hover со сдвигом влево на -1em и 1em соответственно:

margin-left: -1em;
margin-right: 1em;

Весь код вы можете посмотреть в примере или скачать набор файлов . В тенях(shadow) значения 0,0,0, .3 задают соответственно цвет в формате rgb и ширину тени в относительных единицах. А в анимации (transition) задается время срабатывания в сек.

Работает фишка в Safari 5, Chrome 5.0, Opera 10.53 и Firefox 3.6(здесь кроме анимации).

Источник: webstuffshare.com

12.07.2011

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

Оставить комментарий: