sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > Html > 美丽的阴影(剖析jquery主页)

美丽的阴影(剖析jquery主页)

作者:xuhongji发布时间:2020-09-24分类:Html浏览:78评论:0


导读:<style><!--*,  *::before,  *::after{  b...
<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

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


欢迎 发表评论:

Html排行
«   2020年11月   »
1
2345678
9101112131415
16171819202122
23242526272829
30
标签列表
网站分类
文章归档
最近发表
推荐文章