三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

Position定位巧做边框阴影,阴影文字,彩虹字,倒影字效果
作者:Neoxone    发表时间: 2008年11月20号,星期四     阅读:5,950 次

美工们在设计漂亮的页面时,常常会采用一种阴影边框的效果。如图:
null
一般做法我们会将阴影框上下多扩展一些长度再切出来,使用right,bottom的背景定位(background-position)。

但是使用这样子的背景图在扩展上难免有些不足,定位上,也比较麻烦,并且为了这么一点点的效果,需要使用这么大的一张背景图,难免有些违逆我们偏嗜精简的心。

另外还有一种洋葱皮阴影做法,这种做法应该是切三张图。相对前面的做法就是不用切一张很大的图,且扩展性很好。但牺牲的是需要多添加二个层来放置背景。这种方法我是敬而远之的。

推翻了前面的几种做法,就此隆重推荐我们这种position定位法。
首先我们需要的多包容一个层(怎么这时候又不违逆你的心了。。。不好意思,虽然要多一个层,但我还是认为这么做精简,起码省却了美工们去切图了)

我稍微解释一下做法:

移动等大的包含关系的两层中的上一层偏离一些位置。(当然你也可以移动下层,甚至不用position改用margin负值也可以,只不过你都要多费些周折了)
这样下层的背景就成了上层的阴影了。

再说明下这个方法的不足:
除了前面提的要多需要一个层,就是不能模拟出超真实的阴影效果。

然后,或许大家对 top:-4px; right:2px;这个有些疑惑。
因为我们给front加了1px的border,加了这后,width和height都增加了2px.而top是相对顶部进行位移的,所以上下两个border都需要考虑进去,即2px+2px。而right是相对front的最右侧位置的,所以只需要2px.这样右侧和下侧都有2px宽的阴影了。

好了,边框阴影的效果就这样了。可能你也一直在用这种方法吧。那么,把这种方法用在文字上,你有没有试过呢。

请看,不用滤镜,不用图片,我们来看下立体字效果如何用纯CSS实现:

改变top,left值就可以模拟任意方向的投影。

——————————

要是以上的效果做法还有一些参考价值的话。
那么下面的效果,怎么说呢,仅供娱乐吧(好像盗用了某个人的词了)

—————————–

下面是什么效果呢,标题说了:彩虹字和倒影字。
不过在这之前,先再看一个效果:阴阳字(很囧啊…)

这个效果也是使用position定位来的。

不过这里关键的position有两个(前面的效果其实只有一个是关键的)
先是color层,absolute之后使用top向上移动8pt;在包含它的wrap中,使用overflow:hidden;将color中的文字”斩头”。
斩头之后,再将wrap绝对定位且下移8pt,刚好和下面back的文字重合。
这样,设置两段文字为不同颜色,就出现了我们”阴阳字”的效果。

如果这个效果的做法你理解了,就不难理解下面彩虹字和倒影字的做法了。
(只是大家看了后,一定要忍住,千万不要死命地扔板砖,砸到我不要紧,砸到花花草草就不好了:D )。

:p 无敌7层position绝对定位2pt高度超级无缝衔接疯狂彩虹字特效:

还有我们的
:p 重型7级absolute单层1像素真实web2.0渐变风格倒影字效果(如果再加上透明滤镜更厉害)

null

标签: , , , ,

3 条评论 发表在“Position定位巧做边框阴影,阴影文字,彩虹字,倒影字效果”上

  1. [...] 提到这个翻转镜像效果,倒想起了自己之前的一个娱乐之作:重型7级absolute单层1像素真实web2.0渐变风格倒影字效果(全兼容) 。 [...]

  2. air 说:

    一个字,绝!!!

    回复

  3. [...] http://www.cssass.com/blog/2008/52.html 0 No Comments » Posted in 未分类 点击这里取消回复。 [...]

留下回复

):9:( ):8:( ):7:( ):6:( ):5:( ):4:( ):3:( ):2:( ):20:( ):1:( ):19:( ):18:( ):17:( ):16:( ):15:( ):14:( ):13:( ):12:( ):11:( ):10:(