欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-01 17:29:00
...

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

嗯,写到这了,以后继续补充---------------------------the world ain't all sunshine and rainbows