Websovet - блочная верстка веб сайтов, HTML, CSS, jQuery и WordPress

12.07.2011 | Рубрики: Верстка | Комментарии (4)
Тэги: CSS3, shadow, transition, анимация, плавающее меню, эффект тени

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

20.05.2011 | Рубрики: Верстка | Комментарии (7)
Тэги: CSS3, блочная верстка, Верстка, сервисы

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

Сегодня я хочу представить вам весьма интересный ресурс CSS3 Patterns Gallery, который позволяет быстро подобрать симпатичный рисунок фона для сайта и получить соответствующий код для файла стилей.

Вот, к примеру, стильный карбон:

Код его выглядит следующим образом:

background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;

По идее, фишка должна работать в Firefox 3.6+, Chrome, Opera 11.10+ и IE10+. Хотя, возможны и накладки.

Enjoy!