CSS3.0之text-shadow属性

标签: CSS3 | 发表时间:2012-08-31 16:32 | 作者:adou
出处:http://varhi.com

CSS3.0的text shadwo属性已经出现一段时间了,下面就分享一下收集的关于text-shadow效果的使用案例!如果你仔细研究了这些,你必将对text-shadow有更加深入的了解。
text-shadow其语法包括投影X轴偏移、Y轴偏移、模糊参数以及投影颜色,看下图。

一、vintage 文字效果
效果:

代码:

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

学习要点:text-shadow通过同时设置多个投影效果实现

二、Neon 文字效果
效果:

代码:

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

学习要点:text-shadow保持x、y轴偏移不变,逐渐增大模糊参数的数值及变幻颜色实现。

三、Anaglyphic 文字效果
效果:

代码:

text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

学习要点:text-shadow与rgba结合实现,颜色采用rgb的颜色格式Red (R)、Green (G)、Blue (B),a为透明程度opacity/alpha。

关于text-shadow的更多案例详见 www.line25.com



相关 [css3 text shadow] 推荐:

CSS3.0之text-shadow属性

- - 收集分享互联网资源!
CSS3.0的text shadwo属性已经出现一段时间了,下面就分享一下收集的关于text-shadow效果的使用案例. 如果你仔细研究了这些,你必将对text-shadow有更加深入的了解. text-shadow其语法包括投影X轴偏移、Y轴偏移、模糊参数以及投影颜色,看下图. 一、vintage 文字效果.

CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解

- - 博客园_梦想天空
  《CSS3 经典教程系列》的前一篇文章向大家详细介绍了线性渐变(linear-gradient)的用法,今天本文介绍的盒阴影(box-shadow)是目前用得最多的 CSS3 特性之一. 盒阴影效果和圆角效果一样都是做成图片,直接编写  CSS 代码就可以实现. Web 开发人员和设计师必读文章推荐.

Sublime Text 2 简介

- Gnauk - 走走停停看看
最近试用了一款新的编辑器 Sublime Text 2,跨平台,据说他是仿TextMate的,没用过TextMate,不知道后者有多厉害. 然而 Sublime Text 2 我一用就爱上他了. 一开始是由于他的迷你地图模式而吸引我的注意力的,这个迷你地图可以概览整个文件. 这个是个亮点,在其他编辑器中都没有见过此类功能.

前端神器 Sublime Text 2

- - 博客园_首页
  博主之前一直用notepdd++写前端代码,用得也挺顺手了,早就听说sublime的大名,一直也懒得去试试看,认为都是工具用着顺手就好. 这几天突然心血来潮,下了个试了下,结果. 结果博主毫无节操的抛弃了notepad++. 下面根据博主这几天的使用心得,来介绍下这款前端神器,介于使用时间很短,有些说的不妥的地方还望各位看官海涵.

Sublime Text 2 使用心得

- - CSDN博客Web前端推荐文章
作为一个前端,有一款好的开发利器是必不可少的,editplus、notepad++都是不错的工具,体积轻巧,启动迅速(dw太浮肿了). 最近,又有一款新的编辑器诞生,席卷前端界,惹得无数喜爱,不少前端er纷纷抛弃用了数年的“伙伴”,投入了她的怀抱——Sublime Text2. Sublime Text2是一款跨平台的编辑器,再也不用为换平台而找不到合适的、熟悉的编辑器担忧了.

【卡片对战】暗影时代:Shadow Era

- carl - 爱Apps - www.iapps.im
精选限时免费应用,由 AppPusher 为您送达. 无限精彩,尽在 iapps.im. 大小: 78.3 MB 系统: 3.0+. Shadow Era为一款魔幻风格的免费式的集换卡片策略游戏,游戏的画面很精美,游戏为网络对战,也就是使用iTunes的帐号来登陆. 不少朋友一直想找一款精美的卡片对战的游戏,那就千万别错过这款了,而且游戏同时支持多平台,玩家也可以在电脑上进行游戏.

是时候使用filter:drop-shadow了

- - 前端观察
前些天在做一个项目的时候,用到了阴影,阴影是个方向都有的,于是写了一大坨box-shadow来实现,然后今天看到bricss说到filter:drop-shadow,豁然开朗. 具体的实现不用不细讲了,直接看代码:. box-shadow方案:. drop-shadow滤镜方案:. 线上demo: http://dabblet.com/gist/3820382.

css3 变形

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

varchar和text说不清的那些事

- - OurMySQL
最近有几个同学问我varchar和text有啥别吗,这个问题,以前说真的也没太多的整理,以前遇到text在设计中就是尽可能的拆到另一个表中,保持主表尽量的瘦小,可以让innodb bp缓存更多的数据. 今天借次机会系统整理一下,主要从存储上,最大值,默认值几个方面进行比较. BTW: 从ISO SQL:2003上讲VARCHAR是一个标准型,但TEXT不是(包括tinytext).varchar在MySQL 5.0.3之前只支持0-255byte, 在5.0.3之后才支持到0-65535byte..

mysql text 字段过多解决方法

- - 非技术 - ITeye博客
表类型: innodb, row_format=compact (这是默认的行格式). 插入超过10个blob, blob的数据量很小(<768字节), 插入成功. 插入超过10个blob, blob的数据量很大(>768字节), 插入失败:报 Got error 139 from storage engine.