美丽的阴影（剖析jquery主页）

<style><!--
*,
  	*::before,
  	*::after{
  		box-sizing: border-box;
  	}
  	body{
  		font-family: Helvetica,Arial;
  	}
  	.main a,
  	.main a:hover,
  	.main a:link,
  	.main a:visited{
  		font-weight: bold;
  		color: white;
  		text-decoration: none;
  		text-shadow: 0 -2px 6px rgba(0,0,0,.7);
  	}
  	p.main{
  		background: #0769AD;
  		width: 100%;
  	}
  	.logo{
  		margin: 0 5%;
  		padding: 20px 0;
  	}
  	.logoImg{
  		display: block;
  		overflow: hidden;
  		height: 66px;
  		background: url("http://jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png") no-repeat;
  		text-indent: -1000px;
  	}
  	.main .navbar{
  		background: rgba(0,0,0,.1);
  		margin: 0 5%;
  		border-top-left-radius: 20px;
  		border-top-right-radius: 20px;
  		border-top: 1px solid rgba(255,255,255,.3);
  		border-left: 1px solid rgba(0,0,0,.3);
  		box-shadow: 0 0 5px rgba(0,0,0,.7);
  	}
  	.main .clear-fix::before{
  		content: "";
  		display: table;
  	}
 		.main .navbar::after{
 			content: "";
 			display: table;
 			clear: both;
 		}
  	.navbar ul,
  	.navbar li,
  	.search{
  		display: inline-block;
  	}
  	.search{
  		margin: 1em;
  		float: right;
  		background: transparent;
  		box-shadow: inset 0 0 9px rgba(0,0,0,.7);
  		border-radius: 0.6em;
  	}
  	.search::after{
  		content: "";
  		display: table;
  		clear: both;
  	}
  	.search input{
  		font-weight: bold;
  		color: white;
  		background: transparent;
  		text-shadow: 0 -1px 0 rgba(0,0,0,.7);
  	}
  	.search button{
  	}
  	.navbar ul{
  		width: 70%;
  	}
  	.navbar li{
  		margin-right: 5px;
  	}
  	.navbar li a{
  		padding: 7px 11px;
  	}
  	.navbar li a:hover{
  		border-radius: 0.2em;
  		box-shadow: inset 0 0 9px rgba(0,0,0,.7);
  	}
        code{
                border-radius: 5px;background: gray; padding:0.2em;       
}
--></style><!-- 玻璃特效 -->
<p class="main">
    <br/>
</p>
<p class="logo clear-fix">
    jquery
</p>
<p class="navbar clear-fix"></p>
<ul class=" list-paddingleft-2">
    <li>
        <p>
            Download
        </p>
    </li>
    <li>
        <p>
            API Documentation
        </p>
    </li>
    <li>
        <p>
            Blog
        </p>
    </li>
    <li>
        <p>
            Plugins
        </p>
    </li>
    <li>
        <p>
            Browser Support
        </p>
    </li>
</ul>

jquery主页第一眼看到的就是这个玻璃渣效果，设计者利用高光和阴影制造出这种效果。

怎么做出这种感觉呢？

第一步：导航区设定为半透明，颜色为rgba(0,0,0，.1)

第二步：左上角和右上角切出圆角（not important）

第三步：导航区上部起高亮border-top: 1px solid rgba(255,255,255,.3)

第三步：导航区四边起阴影box-shadow:0 0 5px rgba(0,0,0,.7)

第四布：增加左侧导航区阴影效果border-left: 1px solid rgba(0,0,0,.3)

好的歌唱也唱不厌，jquery主页许多地方有类似的手法，不信请往下看：

okokokokkokoko

看不见。。。。好吧，我也是买了一个放大镜才看到的，效果的样子类似于：用刀在灰色的岩石上画了一条线，就像..就像古碑上刻的字。 所做的设置很简单，根据背景的颜色选取高光和阴影的颜色；颜色确定后，开始设置阴影：box-shadow: 0 -1px #000；设置高光：border-top: 1px solid #333

嗯，写到这了，以后继续补充