Pinterest Navigation Bar Box Shadow css

Question

Кто-нибудь знает, как получить точную тень окна, которая появляется в нижней части фиксированной позиции navbar на pinterest.com?

http://pinterest.com/

Answer 1

Вы могли бы использовать любой инструмент для разработчиков (Chrome DevTools или Firebug), чтобы найти это:

box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4); 
-moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4); 
-webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4); 

Answer 2

Глядя на сайты CSS стиль в Chrome я получил этот сегмент кода для этого бар:

#CategoriesBar { 
position: absolute; 
z-index: 101; 
top: 44px; 
right: 0; 
left: 0; 
text-align: center; 
font-size: 13px; 
color: #8C7E7E; 
background-color: #FAF7F7; 
border-top: 1px solid #CFCACA; 
box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4); 
-moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4); 
-webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4); 
} 

Эти 3 линии должны помочь вам в вашем стиле:

box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4); 
-moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4); 
-webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);