纯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层叠在上面投影产生内发光视觉错觉，这个也就是为什么要设置文字颜色透明的原因，假如文字本身有颜色，那么就会挡住半透明，这样背景色就给挡住了，给普通投影没区别。不过这个方法有瑕疵，而且很致命，就是羽化多出边界的会有羽化的红色，如果投影红色换成白色，这样跟背景融合，效果没话说，但是如果用与底色区别太明显的颜色，这样就恶心了，不过可以调节成为“外发光”效果，事在人为。
0
投稿猜你喜欢
- 内涵：正则匹配，正则替换，页面抓取，图片保存 。实用的第一次 Python 代码 参考#!/usr/bin/env pythonimport
最近需要做集团的SRC系统。暂无安全研发，所以只能找我这个小菜兼职开发。系统使用Django框架，在整个过程中，有许多奇特的需求。在某项需求- 网页设计是由很多个不同的元素构成的,而这些元素的重要性都不同,并且有些元素还需要尤为的突出.有些元素彼此之间存在着联系,而另外的元素之间则一
- 你是一位交互设计师吗？告诉我，你具体做些什么？我是做网站设计的？听起来不够专业。我是做网页设计的，听起来……你们是做界面的……恩，好吧，我勉
- 1、GIL简介GIL的全称为Global Interpreter Lock，全局解释器锁。1.1 GIL设计理念与限制python的代码执行
- 本文实例为大家分享了JDBC建立数据库连接的具体代码，供大家参考，具体内容如下import java.sql.DriverManager;i
- 面包屑导航可以将浏览过的页面记录下来，方便很快速的跳转回某一个页面，本文介绍了几种自己封装面包屑组件的方式。一、为什么需要面包屑？当网页进行
- 划动门菜单技术：运行代码框<style>body {font-size:12px;font-family:宋体}ul.TabBa
- 一、Python安装Window系统下，python的安装很简单。访问python.org/download，下载最新版本，安装过程与其他w
- 1、需要的环境Python2.XRequests 库2、单字段发送单个文件在requests中发送文件的接口只有一种，那就是使用reques
- abs(number) 返回绝对值。 array(arglist) 创建一个数组。 asc(string) 返回字符串第一个字符的ansi码
- 本文实例讲述了python使用wxpython开发简单记事本的方法。分享给大家供大家参考。具体分析如下：wxPython是Python编程语
- asp十进制转二进制；二进制转十进制；二进制转十六进制；十六进制转二进制；八进制转二进制'二进制转八进制；八进制转十进制；十六进制转
- 在oracle数据库迁移至mysql数据库，除了oracle数据库模型移到mysql外，还一个重要环节就是要将oracle数据库的数据移到m
- 方法一【推荐】、用js插入flash，可防止虚线框激活建立一个ShowFlash.js文件，拷贝以下代码：function sho
- 1.确保系统中有依赖的libaio 软件，如果没有： yum -y
- 决策树模型  决策树（decision tree）是一种基本的分类与回归方法。 &am
- 我遇到的一个小需求，就是希望通过判断pandas dataframe中一列的值在两个条件范围（比如下面代码中所描述的逻辑，取小于u-3ε和大
- 1.zip用法简介在python 3.x系列中，zip方法返回的为一个zip object可迭代对象。class zip(object):&
- 1.创建应用django-admin startproject cloudmscd cloudmspython manage.py star
