纯CSS3文字渐变内发光投影效果(2)
作者:a287019674 发布时间:2011-08-24 20:15:10
内投影效果很明显,很正吧,只要稍加改造就是内发光了,啊哈哈.....笑归笑,分析下实现原理先:
既然在一个div层上面实现不了内投影,那么就用多几个层,但是不要在html中添加多余的标签,所以自然而然的就想到用伪类,于是我用了个:after, content里面写上跟div里面一样的文字,结果居然样式一模一样(之前都是写空格什么的,没有写过文字);
我把.text层相对定位,.text:after绝对定位叠在它上面,因为样式一样,所以说完全重叠的,然后就试着用text-shadow来做效果,但是文字自身的颜色比投影的高,如图:
<IMG height=133 alt="纯CSS3文字
本身的文字颜色是实体的,感觉处理起来会比较麻烦,所以我下意识的用rgba隐藏它,设置了文字的alpha为0,这里用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像素范围会减缓的从不透明过渡到全透明,如图:
<IMG height=298 alt="纯CSS3文字
中心是红色,背景是黄色,羽化的时候原来不透明的红色区域也出现了半透明状态与背景黄色相融呈橙色,然而说这么多羽化的东西有什么用呢? 有用的,如果我们把背景色定死一个区域,上面的层羽化的话,会出现什么情况呢? 看下面这个ps图片你就应该明白了:
<IMG height=262 alt="纯CSS3文字
下面是一个“广州”的黑色纯文本文字,然后我复制多一个图层出来栅格化然后高斯模糊它,结果模糊层透过下面看到部分黑色纯文本文字与上面的红色半透明区域融合,视觉上有点内阴影的感觉。这个就是我实现纯css3内发光的原理:一个.text纯文字层,一个.text:after层叠在上面投影产生内发光视觉错觉,这个也就是为什么要设置文字颜色透明的原因,假如文字本身有颜色,那么就会挡住半透明,这样背景色就给挡住了,给普通投影没区别。不过这个方法有瑕疵,而且很致命,就是羽化多出边界的会有羽化的红色,如果投影红色换成白色,这样跟背景融合,效果没话说,但是如果用与底色区别太明显的颜色,这样就恶心了,不过可以调节成为“外发光”效果,事在人为。
猜你喜欢
- 大家知道,mailto是网页设计制作中的一个非常实用的html标签,许多拥有个人网页的朋友都喜欢在网站的醒目位置处写上自己的电子邮件地址,这
- 最后罗嗦一句,本人录入这篇文章用的机器上没有 ASP 环境,所以提供的代码未能进行测试,对这一点本人深表歉意。如果大家发现了代码中的任何问题
- 从信息组织角度来看,段落内行之间的关系要比段落之间的关系低一个级别,所以在呈现上段落之间的“段距”应该大于段落之内的“行距”,如此才能一目了
- XML文档因为其固有的描述性特性而趋向于变得很罗嗦。其结果是文档会由于被描述的数据增多而变得很长,而这种很大的文档会在需要同其他实体进行交换
- jscript 5.7 发布修复了不少ie javascript内存泄露的问题。但是leak依然存在。当我们频繁使用 setInterval
- 这最近在PJ的function库里看到的这个函数,感觉思路差了点,不过相对比较完美,只是闭合标签时的顺序问题,呵呵 修改一下数组arrTag
- 可以使用 Application 对象在给定的应用程序的所有用户之间共享信息。基于 ASP 的应用程序同所有的 .asp 文件一样在一个虚拟
- 全文索引在 MySQL 中是一个 FULLTEXT 类型索引。FULLTEXT 索引用于 MyISAM 表,可以在 CREATE TABLE
- 行高的概念看上去很简单——文字行的高度,其实,行高所涉及到的基础知识,对于今后理解其它属性也很重要。大片密密麻麻的文字往往会让人觉得乏味,因
- 使用在Safari和WebKit中可用的CSS高级特性,你可以为你的网站和网络应用带来一个新的级别的令人兴奋的东西。WebKit是Safar
- 搞了一上午,头都大了!最终解决问题。其实这问题老早就遇上了,但是比较懒,三下两下没整好便推开了搜索了一下,产生< msxml3.dll
- 英文版见:http://dflying.dflying.net/.../98_web_standard_and_aspnet__part1_
- 上期回顾:亚马逊购物用户体验分析 (一)“查找内部”功能书是在亚马逊最常被购买的产品之一,所以毋庸置疑亚马逊的开发小组已经建立了一个关于“查
- 写一个循环删除的过程。 create or replace procedure delBigTab(p_TableName in varch
- Brendan Eich于1995年在Netscape发明了JavaScript语言,这个语言在过去的一些年里曾是一个最被误解的语言,随着A
- <% Function ReplaceUrl2(HTMLstr) Dim n,st
- 如何将产生的密码记录并发送给用户?这里使用了cdonts邮件组件来发送邮件,前提服务器得支持cdonts组件。好了,看看具体实现方法吧,不是
- 依次前移,实现聊友们的发言的更迭:function form1_onsubmit()if document.form1.
- 提起数据库,第一个想到的公司,一般都会是Oracle。该公司成立于1977年,最初是一家专门开发数据库的公司。Oracle在数据库领域一直处
- 关于在asp中不使用组件使得脚本sleep的办法还比较少见,可能比较好的办法是创建同步的xmlhttp request,直到获得的时间达到某