码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-08-05 03:02:38      阅读:354      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   strong   io   文件   

今天我们有很多程序员在给文本设置样式时,都感觉无从下手。一般有两种情况:
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页面,代码如下所示:
 
接着,我们在外部样式文件中,设置如下的样式代码(在样式中我已经将每一行意思加了注释):
 
运行一下代码,燃烧着的文本效果就出来了。

bubuko.com,布布扣

 
利用text-shadow,我们也可以实现 文字凸出的效果或发光字体效果等等,大家可以开动脑经,试试看吧。
关于字体效果各种属性,我会在以后章节的实例里再给大家做更详细讲解。
 

欢迎大家加入互联网技术交流群:62329335 

个人申明:所分享博文,绝对原创,并力争每一个知识点都通过实战演示来进行验证。

 

CSS3新增属性text-shadow详解及燃烧的字体实战开发,布布扣,bubuko.com

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

标签:style   blog   http   color   使用   strong   io   文件   

原文地址:http://www.cnblogs.com/itdriver/p/3891381.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!