Pinterest Navigation Bar Box Shadow css

综合技术 2017-12-31

Does anyone know how to get the exact box shadow that appears on the bottom of the fixed position navbar on pinterest.com?

http://pinterest.com/

Problem courtesy of: Wilfred

Solution

You might have used any developer tool (Chrome DevTools or Firebug) to find this out:

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

Solution courtesy of: Alexander Pavlov

Discussion

Looking at the sites CSS styling in Chrome I got this segment of code for that bar:

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

These 3 lines should help you out on your style:

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

Discussion courtesy of: Cameeob2003

This recipe can be found in it's original form on Stack Over Flow
.

CSS3 Recipes

责编内容by:CSS3 Recipes (源链)。感谢您的支持!

您可能感兴趣的

What is the simplest way to turn overflow:visible ... I'm trying to use only css to turn a nested div and a normal div into something where the top one ca...
Selecting Records Using collection_select and Usin... I have the following collection_select logic in my Rails 3.2.3 form to select states and order them ...
Animation at the end of the first animation UITextField can not become the first user of the animation At the moment, I am...
2017 全栈开发人员修炼指南 据 Stack Overflow 2016 Developer Survey 调研,全栈网络开发是目前最受欢迎的开发职业。难怪现在有几十个在线的或者个人版程序来帮助人们成长为全栈开发员,甚至可以协助...
搭建一个多页面的无依赖的工程化项目... 最近金拱门比较火,我们先戳开它的官网看看。 看完后,如果你老板要是让你做这么一个网站,一定要seo,一定要兼容IE,你会怎么去做呢? 用vue/react吧,单页应用满足不了seo,而且...