Меню с широкой тенью на CSS3

Меню с широкой тенью на CSS3

На днях наткнулся на стильный сайт blueman.com выполненный в современном плоском дизайне а ля Metro. Мне весьма понравилась менюшка на этом сайте. А именно то, как выполнена падающая широкая тень от плашек. Явно на CSS3. Поковырялся в коде и нашел довольно остроумный способ создания такой широкой тени средствами CSS3.

На самом деле фишка очень простая. Тень как бы наращивается постепенно путем задания множества значений одного и того же цвета, но разной толщины. По нарастающей. Т.е. сначала тень в 1 пиксель, затем в 2, потом в 3 и так далее. В результате получается правильная широкая падающая тень под 45°

В файле CSS это выглядит следующим образом:

.menu li:hover {
background: #009AE2;
box-shadow:-1px 1px 0 #0d4790,-2px 2px 0 #0d4790,-3px 3px 0 #0d4790,-4px 4px 0 #0d4790,-5px 5px 0 #0d4790,-6px 6px 0 #0d4790,-7px 7px 0 #0d4790,-8px 8px 0 #0d4790,-9px 9px 0 #0d4790,-10px 10px 0 #0d4790;}

Как видите, сначала задается толщина в 1 пиксель со смещением влево и вниз (размытие в 0), далее в 2 пикселя и т.д. Все очень просто.

ДЕМО

Enjoy

15.11.2013

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

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

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

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

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

2 комментария

  1. samsim
    http://progfromdelphi.com/
    30.12.2013

    Круто у вас вышло. Надо будет себе такое попробовать.

  2. beklem25
    http://beklem25.ru
    19.02.2015

    Не плохо смотрится если мало контента

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