CSS3网页制作实例:实现网页文字渐变内发光投影
|
前阵子做了个css3文字效果，涉及css3投影，渐变，蒙版，伪类等知识点，现在写下设计思路，仅供参考。发个效果图大家看先：
投影shadowbox-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;
如果用box-shadow的话效果是这样的：
会根据放文字容器的盒子来投影(我设定了容器的宽度200px，背景未设定颜色 透明)，不会跟随文字轮廓投影； 然而text-shadow没有inset属性，不能跟box-shaow一样轻松实现文字内投影。 内发光/内投影一层一层来，一般ps处理文字效果都是一层层的剥离，css3也差不多，所以先从文字内发光入手： 我写了这么一个页面试内发光，具体你可以下载这个代码页面看看：http://dl.dbank.com/c0ymzm8hbk 效果图如下：
内投影效果很明显，只要稍加改造就是内发光了，下面是实现原理： 既然在一个div层上面实现不了内投影，那么就用多几个层，但是不想在html中添加多余的标签，所以自然而然的就想到用伪类，于是我用了个:after, content里面写上跟div里面一样的文字，content文字样式会与原div的样式统一 我把.text层相对定位，.text:after绝对定位叠在它上面，因为样式一样，所以说文字是完全重叠的，然后就用text-shadow来做效果，文字自身的颜色比投影的高，如图：
本身的文字颜色是实体的，感觉处理起来会比较麻烦，所以我用rgba隐藏它，设置了文字的alpha为0（也可以用transparent属性来设置文字透明），这里用rgba是因为我只想隐藏文字本身的颜色层，如果用opacity的话，整个层都会消失；所以我用color:rgba(0,0,0,0);&n |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
