快速业务通道

CSS3网页制作实例:实现网页文字渐变内发光投影

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-23

前阵子做了个css3文字效果,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考。发个效果图大家看先:

投影shadow

box-shadow

一般我们都是用css3的box-shadow来实现盒投影,用text-shadow来实现文字投影,box-shadow设置方型盒子投影,用raidus的话可以让盒子产生圆角,看起来就很圆滑舒服,一般的写法是这样的:

-moz-box-shadow:1px 1px 5px #000;

1px(水平方向偏移)  1px(垂直方向偏移)  5px(阴影羽化)  #000(颜色);

当偏移量为负数时就向反方向偏移,试试就明白了,这里不贴图。

这个是一般的投影效果,如果是内阴影,那么就加个“inset”属性,写法如下:

-moz-box-shadow:<strong>inset</strong> 1px 1px 5px #000;

这样就变成了PS里面的内阴影,效果很赞,很实用,如果需要内发光效果,则背景底色深,投影颜色浅,这样就会感觉是发光,而背景颜色深,投影颜色浅,这样看起来就是投影了;

text-shadow

文字是用text-shadow来产生阴影,而且产生的时候能跟随文字的轮廓投影,如下所示:

text-shadow:2px 2px 1px #000;

CSS3网页制作实例:实现网页文字渐变内发光投影

如果用box-shadow的话效果是这样的:

CSS3网页制作实例:实现网页文字渐变内发光投影

会根据放文字容器的盒子来投影(我设定了容器的宽度200px,背景未设定颜色 透明),不会跟随文字轮廓投影;

然而text-shadow没有inset属性,不能跟box-shaow一样轻松实现文字内投影。

内发光/内投影

一层一层来,一般ps处理文字效果都是一层层的剥离,css3也差不多,所以先从文字内发光入手:

我写了这么一个页面试内发光,具体你可以下载这个代码页面看看:http://dl.dbank.com/c0ymzm8hbk

效果图如下:

CSS3网页制作实例:实现网页文字渐变内发光投影

内投影效果很明显,只要稍加改造就是内发光了,下面是实现原理:

既然在一个div层上面实现不了内投影,那么就用多几个层,但是不想在html中添加多余的标签,所以自然而然的就想到用伪类,于是我用了个:after, content里面写上跟div里面一样的文字,content文字样式会与原div的样式统一

我把.text层相对定位,.text:after绝对定位叠在它上面,因为样式一样,所以说文字是完全重叠的,然后就用text-shadow来做效果,文字自身的颜色比投影的高,如图:

CSS3网页制作实例:实现网页文字渐变内发光投影

本身的文字颜色是实体的,感觉处理起来会比较麻烦,所以我用rgba隐藏它,设置了文字的alpha为0(也可以用transparent属性来设置文字透明),这里用rgba是因为我只想隐藏文字本身的颜色层,如果用opacity的话,整个层都会消失;所以我用color:rgba(0,0,0,0);&n

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号