Продолжаем заниматься украшательствами, используя фишки 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(здесь кроме анимации).

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