css伪类渐变,CSS3文字渐变内发光投影效果_css

最新推荐文章于 2022-07-18 09:36:19 发布

夏虫爱吃冰

最新推荐文章于 2022-07-18 09:36:19 发布

阅读量1.4k

点赞数

文章标签： css伪类渐变

前阵子做了个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:inset 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); 来实现效果，写在.text的话就是隐藏掉.text的文字本身颜色层，同时.text：after也会继承这隐藏属性，如果你单单想隐藏掉.text：after的话，那就在.text：after里面写，这样.text本身的颜色层就会保留；然后再在.text用text-shadow: 0px 0px 0px #000000; 投影出一个不偏移不羽化的实体投影打底色；

对于.text：after的投影层，需要涉及到ps羽化选区的知识，在羽化图像的时候，是根据选区边界为中心，向两边羽化，如果羽化值为10px，那么就是左右各5px，那么以选区边界为中心的10px像素范围会减缓的从不透明过渡到全透明，如图：

中心是红色，背景是＊＊，羽化的时候原来不透明的红色区域也出现了半透明状态与背景＊＊相融呈橙色，然而说这么多羽化的东西有什么用呢?

有用的，如果我们把背景色定死一个区域，上面的层羽化的话，会出现什么情况呢? 看下面这个ps＊＊你就应该明白了：

下面是一个“广州”的黑色纯文本文字，然后我复制多一个图层出来栅格化然后高斯模糊它，结果模糊层透过下面看到部分黑色纯文本文字与上面的红色半透明区域融合，视觉上有点内阴影的感觉。这个就是我实现纯css3内发光的原理：一个.text纯文字层，一个.text:after层叠在上面投影产生内发光视觉错觉，这个也就是为什么要设置文字颜色透明的原因，假如文字本身有颜色，那么就会挡住半透明，这样背景色就给挡住了，跟普通投影没区别。不过这个方法有瑕疵，而且很致命，就是羽化多出边界的会有羽化的红色，如果投影红色换成白色，这样跟背景融合，效果没话说，但是如果用与底色区别太明显的颜色，这样就恶心了，不过可以调节成为“外发光”效果，事在人为。