Меню с широкой тенью на 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

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