shadow - Pinterest ナビゲーション バー ボックス シャドウ css

Question

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

Chrome でサイトの CSS スタイルを確認すると、そのバーの次のコード セグメントが得られました。

#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);