美丽的阴影(剖析jquery主页)
作者:xuhongji发布时间:2020-09-24分类:Html浏览:203评论: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
嗯,写到这了,以后继续补充
- 上一篇:深度解析响应式布局
- 下一篇:php切割字符串介绍-explode
相关推荐
你 发表评论:
欢迎- Html排行
- 标签列表
- 网站分类
- 最近发表