纯CSS3文字 渐变内发光投影效果

标签: CSS css3 发光 投影 渐变 | 发表时间:2011-08-09 16:33 | 作者:龙 MapleShadow
出处:http://www.qianduan.net

前阵子做了个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;

如果用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层叠在上面投影产生内发光视觉错觉,这个也就是为什么要设置文字颜色透明的 原因,假如文字本身有颜色,那么就会挡住半透明,这样背景色就给挡住了,跟普通投影没区别。不过这个方法有瑕疵,而且很致命,就是羽化多出边界的会有羽化 的红色,如果投影红色换成白色,这样跟背景融合,效果没话说,但是如果用与底色区别太明显的颜色,这样就恶心了,不过可以调节成为“外发光”效果,事在人为。

渐变gradient

内发光基本解释完毕,下面说下渐变,其实我在之前的博客里面有提及

CSS3渐变http://blog.sina.com.cn/s/blog_74d6cedd0100q9o3.html以及

css3画水晶质感按钮http://blog.sina.com.cn/s/blog_74d6cedd0100qcdn.html

里面主要记渐变的基本写法,蒙版的用法,有兴趣的可以通过链接看看。

但是渐变颜色一般只是适用于背景色,就是方方框框那些,对文字不起作用,网上有很多关于渐变的文章,而我这里是用蒙版来做渐变,但是假如用单单用蒙版来做,颜色会比较单调,只有黑白的调节,这样渐变的过渡比较生硬,所以我采用层叠的方式,用蒙版遮挡一部分实现层之间颜色融合的方式来实现渐变,于是我连:before都用上了,依旧还是用.text打底色,.text:after蒙版实现渐变,.text:before提升渐变效果,同时实现内发光,具体你可以下载这个代码页面看看:http://dl.dbank.com/c00ya6av4u

具体做法是.text设置好高光底色#c60000,.text:after用蒙版,由上至下从透明到不透明拉垂直渐变蒙版,颜色设置深色点 的#ea0000,然后.text:before设置color:rgba(0,0,0,0);  透明因为要做内发光,然后设置投影为text-shadow:0px 0px 5px rgba(110,0,0,0.8);  更深的一个颜色#6e0000,带点透明这样融合起来效果会好些,调节内发光效果,其中你会发现各个层都有写 text-shadow,但是半径很小,因为网页文字是带锯齿的,这样处理的话,文字周围有了些许投影羽化了边界,看起来就柔和了,有起到消除锯齿的作用,最终效果也就出来了,不过因为FF不支持蒙版mask所以只能在webkit内核下的浏览器才能看到渐变效果,FF就没有了渐变效果,如图:

没有蒙版效果,所以是最上面.text:before的颜色,不过内发光,投影这些都还在,效果还勉强可以接受,至于悲剧IE不提也罢……

我一般在新浪博客上面写文章,顺便发下该文新浪地址:http://blog.sina.com.cn/s/blog_74d6cedd0100vjil.html

相关 [css3 文字 发光] 推荐:

纯CSS3文字 渐变内发光投影效果

- MapleShadow - 前端观察
前阵子做了个css3文字效果,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考. 一般我们都是用css3的box-shadow来实现盒投影,用text-shadow来实现文字投影,box-shadow设置方型盒子投影,用raidus的话可以让盒子产生圆角,看起来就很圆滑舒服,一般的写法是这样的:.

CSS3 文字渐变

- slackware - 前端观察
之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯,只有webkit浏览器支持,请暂时无视其它浏览器. 在《CSS的未来:一些试验性CSS属性》中,我们提到了这个属性,相对于Firefox只能用svg做mask,webkit则灵活很多,图片和css3渐变均可.

css3 变形

- - 博客园_Ruby's Louvre
CSS3从IE滤镜偷窍过来的创意,但易用性明显提高了许多. 利用这个,我们可以对某个元素进行旋传,缩放,倾斜与位移,并且区分元素类型,无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.

CSS3 代码生成工具:Create CSS3

- - 我爱水煮鱼
CSS3 具有相当多的新增属性,而且包括阴影、动画、过渡等华丽的效果. 但是由于 CSS3 出来并没有很久,各个浏览器厂商还在开发中,有些属性仍然会带有实验性前缀. 而且类似制作动画、渐变的 CSS3 代码也相当复杂,一旦写错就会导致出现问题. 为此,有人开发了一个生成 CSS3 代码的工具 Create CSS3.

用css3写个logo

- 丸子 - 崔凯,前端开发
演示地址:http://uicss.cn/css3/maxthon-logo.html. 先画一个外框 width: 240px; height: 240px;border-radius: 120px;. 填充背景色background:#b1e4ff;. 描边border:2px solid #789cb6;.

CSS3 pointer-events介绍

- Pstrey - 前端观察
其实早知道这个属性,但是一直没有去研究过. 今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下. 嗯,其实这是个比较简单的CSS3属性. 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作.

HTML5 & CSS3 研究文档

- Kings - 幸福收藏夹
已经说了好久,一直没把这个文件夹分享出来. 这是我去年第四季度里做的,里面有 11 一个文档. 包括 HTML5 中最主要的 JS API 文档,还有 CSS3 中两个比较难的属性. 主要还停留在纯 API 层面上的研究,没有深入到应用中去. 不过,当做工具来使用,和入门文档,还是不错的. 特别是其中的 HTML5 JS API 文档.

纯CSS3透明水晶盒

- iVane - 前端观察
相信大家有看过这个例子:3D盒子,在书《CSS3 实战》上第282页有个综合实战“设计动态立体盒子”的例子,实现方式跟它一样,我的盒子也是以它为原型来设计的,不过在实现方面有做修改、优化,以及增添了一些细节,下面是我的盒子Firefox截图:. 透明化了盒子,通透性强了,因为透明了,所以背部的三个面也就要做出来了,所以总共6个面,比原作多3个;.

CSS3 基本要素概览

- yasy - 博客园-首页原创精华区
    这篇文章将对 CSS 的几个新属性 (text-shadow,box-shadow,and border-radius) 做基本介绍. 这些 CSS3 属性通常用来加强页面布局. 前面的 3 个值是 RGB 颜色值,最后一个值是透明度的级别(0 = 透明,1 = 不透明). RGBA 可以应用于与颜色的任何属性,如字体颜色,边框颜色,背景颜色,阴影颜色等.

CSS3动画-彩虹列表

- 蛋布丁 - 大猫の意淫筆記
昨天在微薄问了个 JScript 的问题, 李振文同学解答了一下,顺便摸过去,发现他的热门文章列表很淫荡. 于是抄袭了一个分享出来,嘿嘿. 要体验的同学可以用 chrome 在俺 blog 侧边里看到. 鼠标移上去的时候一个个亮起来,移走的时候慢慢消失掉. 颜色可以用 Photoshop 拉好渐变取色.