MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » CSS3新增属性text-shadow详解及焚烧的字体实战开发

CSS3新增属性text-shadow详解及焚烧的字体实战开发

www.MyException.Cn  网友分享于:2015-08-26  浏览:0次
CSS3新增属性text-shadow详解及燃烧的字体实战开发
今天我们有很多程序员在给文本设置样式时,都感觉无从下手。一般有两种情况:
1) 不知道关于文本到底有哪些样式属性;
2) 即使借助开发工具的自动提醒,依然不清楚样式属性的具体意思,以及具体用法。
 
今天这篇文章,我将带领大家一起来领受CSS3在文本样式应用方面的超强能力。通过精彩的实例,来使大家重新认识CSS3文本样式,真心希望大家通过此篇文章,即使不能做到精通CSS3的文本样式的应用,也会做到熟练应用。
 
实例: 如何利用CSS3制作燃烧的字体?
 
以前,如果我们网页上想要显示一个燃烧着的文本,大家的第一反应就是找美工,让美工PS一张图。虽然可以做到,但是这却带来了一个局限性就是,如果想另一段文本也是同样的燃烧着的样式,那是不是又得去找美工呢?再者,多了一张图片,意味着必须多一次服务器请求,这也会对服务器产生一些影响。
 
CSS3出来之后,让程序猿非常惊喜,我们可以直接利用CSS3的样式属性text-shadow效果来实现同样的功能,再也不用去烦美工了。
 
首先,我先带着大家熟悉一下,在CSS3中,到底支持哪些关于文本方面的样式属性:
 
1.  要设置文本,最先想到的肯定就是字体相关的,比如我想要宋体,加粗样式的文本,其实这些就是指的是字体样式。
     CSS3中支持的字体样式如下表所示:
 
font-family 字体 定义字体类型,也即使用什么字体
font-style 字体 定义字体的样式,如normal(默认值)、italic(斜体等)
font-variant 字体 定义字体大小写。如normal(默认值)、small-caps(小型大写字母字体)等
font-weight 字体 定义字体粗细,如bold(粗体)
font-size 字体 定义了字体的大小,如0.8em、10px等
font 字体复合类型 当然如果觉得一个个设置比较烦,可以直接使用font来设置,font可以包含上面所有的样式
font-size-adjust 字体 定义是否强制对文本使用同一尺寸
font-stretch 字体 定义是否横向拉伸变形字体

关于字体的样式,它都是以font为开头的,它是设置文本样式的基础。

 
2. 当我们照着上面的样式设置了文字的基本样式,但是我现在想给一段文字设置下划线,或者让文字间的距离远一点,这又怎么做呢?
    下表为文本样式属性:
word-spacing 文本 顾名思义,这是设置文字间的聚类的
letter-spacing 文本 这是设置字符间的距离的
text-decoration 文本 我们把这个词翻译成中文就是 文本-装饰, 所以如果想给文本加下划线或删除线,就是通过这个属性来设置的
vertical-align 文本 顾名思义,垂直-布局,意味着它是设置文本在垂直方向上的布局的,比如middle,text-top,bottom,text-bottom等
text-align 文本 有垂直就有水平方向的,通过此属性设置文本在水平方向上的布局,比如left(左对齐,默认值),center(居中对齐),justify(两端对齐)
text-transform 文本 设置文本的大小写,比如uppercase(大写)、lowercase(小写)
text-indent 文本 定义文本的首行缩进
line-height 文本 设置文本行高,这个属性在应用元素的垂直居中上非常有效
text-shadow 文本 定义文本阴影或模糊效果,这个属性是在css2中引入的,CSS3对该属性做了修改,增加了不透明度样式
text-overflow 文本 定义省略文本的处理方式
direction 文本 设置文本的流入方向,比如rtl(从右到左流入),inherit(通过继承获得)
word-wrap 文本 定义当文本超过指定容器的宽度时是否换行显示
 
3.上面这些目前都是设置文字或文本的布局以及显示方式等,但是现在如果想让字体显示成彩色的,那又如何做呢?
    下面是CSS3中对文字颜色的处理增强:
color 颜色 设置文字显示的颜色(这个是css1中就已经有了)
HSL 颜色表示方式 HSL是色调(H),饱和度(S),亮度(L),通过这3个颜色通道的变化以及它们间叠加来表示各种各样的颜色
HSLA 颜色表示方式 HSLA是在HSL基础上加了透明度处理
RGBA 颜色表示方式 RGBA是在RGB基础上增加了透明度处理
opacity 颜色 定义颜色的不透明度
 
通过上面的内容,我们已经对文本样式属性有一些基本了解了,现在正式进行今天的燃烧字体实例分解步骤之旅。
 
燃烧字体,主要是运用到了CSS样式中的text-shadow阴影效果来实现。
text-shadow属性,在CSS2中引入进来的,CSS3又重新定义了它,增加了模糊半径,这就给我们实现火焰效果提供了方便。
 
text-shadow语法如下:
text-shadow<x轴方向上的偏移量> <y轴方向上的偏移量> <模糊半径(可以省略)> <阴影颜色(可以省略)>;
通过它的语法,我们知道,如果我们不需要模糊效果和颜色,则可以写成 text-shadow:1px 1px; 这句话就是说,阴影是沿着x,y轴正方向偏移1像素的距离。
 
这里我要声明一下,颜色值的位置不一定放在后面,也可以放在前面,但是 偏移量和模糊半径的顺序不能改变。
 
 
好了,开始我们的代码之旅吧,先创建html页面,代码如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<link  rel=”stylesheet” href=”styles.css”>
<title>阴影效果</title>
</head>
<body>
<div class=”container”>
www.itdriver.cn
</div>
</body>
</html>
 
接着,我们在外部样式文件中,设置如下的样式代码(在样式中我已经将每一行意思加了注释):
body{/*将背景设置成黑色,便于查看火焰效果*/
background-color:black;
}
 
.container{
font-family:serif,sans-serif,cursive; /*设置字体类型*/
height:400px;/*设置height与line-height,是文字在container中垂直方向上居中显示*/
line-height:400px;
font-size:80px; /*设置字体大小*/
font-weight:bold; /*将字体加粗显示*/
color:black; /*设置文本颜色为黑色,营造黑夜效果*/
text-align:center; /*设置文本在水平方向上居中显示*/
text-shadow:0 0 4px white, 
0 -5px 6px #FFE500,
2px -10px 6px #FFCC00,
-2px -15px 11px #FFCC00,
2px -25px 18px #FF8000;
}
 
运行一下代码,燃烧着的文本效果就出来了。
 
 
利用text-shadow,我们也可以实现 文字凸出的效果或发光字体效果等等,大家可以开动脑经,试试看吧。
 
关于字体效果各种属性,我会在以后章节的实例里再给大家做更详细讲解。
欢迎大家加入互联网技术交流群:
个人申明:所分享博文,绝对原创,并力争每一个知识点都通过实战演示来进行验证。

文章评论

2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
程序员的鄙视链
程序员的鄙视链
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
编程语言是女人
编程语言是女人
代码女神横空出世
代码女神横空出世
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
Java程序员必看电影
Java程序员必看电影
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
为什么程序员都是夜猫子
为什么程序员都是夜猫子
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
我是如何打败拖延症的
我是如何打败拖延症的
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
旅行,写作,编程
旅行,写作,编程
那些争议最大的编程观点
那些争议最大的编程观点
中美印日四国程序员比较
中美印日四国程序员比较
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员都该阅读的书
程序员都该阅读的书
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
程序员和编码员之间的区别
程序员和编码员之间的区别
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
程序员必看的十大电影
程序员必看的十大电影
程序员应该关注的一些事儿
程序员应该关注的一些事儿
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
如何成为一名黑客
如何成为一名黑客
总结2014中国互联网十大段子
总结2014中国互联网十大段子
10个调试和排错的小建议
10个调试和排错的小建议
鲜为人知的编程真相
鲜为人知的编程真相
每天工作4小时的程序员
每天工作4小时的程序员
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
老程序员的下场
老程序员的下场
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有