找回密码
 注册
搜索
热搜: 回贴

Css不朽的经典—3D文字特效

2009-12-16 02:20| 发布者: admin| 查看: 16| 评论: 0|原作者: 玄霄

效果:
3D Text
以下是一个用了blur滤镜而另一个没用的叠加效果
Ttop.cn Ttop.cn
Glass Text
这个是两个都用了alpha滤镜的效果
Ttop.cnTtop.cn
Inner Shadow
这个是先用了一段白色的文字,再加了mask()滤镜,再用了shadow()滤镜,最后加入chroma()滤镜形成后一段字体,放在前一段文字的相对left: -200px位置上形成的。
Ttop.cnTtop.cn
Outline Text
用mask, glow and chroma三个滤镜联合作用
Ttop.cn
与Marquee的完美结合
www.Ttop.cnwww.Ttop.cn源代码:

Css不朽的经典—3D文字特效

3D Text


以下是一个用了blur滤镜而另一个没用的叠加效果


style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);"
>Ttop.cn
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;">
Ttop.cn


Glass Text


这个是两个都用了alpha滤镜的效果


style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);"
>Ttop.cn
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);"
>Ttop.cn


Inner Shadow


这个是先用了一段白色的文字,再加了mask()滤镜,再用了shadow()滤镜,最后加入chroma()滤镜形成后一段字体,放在前一段文字的相对left:
-200px位置上形成的。


style="width: 200px; height: 70; color: white;"
>Ttop.cn
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);"
>Ttop.cn


Outline Text


用mask, glow and chroma三个滤镜联合作用


Ttop.cn


与Marquee的完美结合


style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);"
>www.Ttop.cn

style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;">
www.Ttop.cn



最新评论

QQ|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )

GMT+8, 2024-9-30 23:30 , Processed in 0.113389 second(s), 12 queries , Gzip On, MemCache On.

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

返回顶部