首页>前端教程>CSS教程

CSS3教程:text-shadow文字阴影详解

在web的早期战场,要实现文字或者图片或者盒的阴影效果,必须启用图片,导致html代码和css代码量都要增加很多,而现在,利用css3新增的text-shadowbox-shadow可以轻松完成阴影的添加,而且效果自然,不逊于ps制作出的效果,唯一的问题就是多层阴影的时候可能渲染要多耗费一点性能。

今天先讲解text-shadow文字阴影。

在前面已经写了一篇文章,看到red-team-design的效果很棒,所以仿制了一个demo,可以先看一下具体的应用,这篇文章主要细致的讲解基础原理。

CSS3教程:text-shadow制作文字阴影效果

text-shadow案例.jpg

查看案例  下载案例

一、text-shadow的语法

按照惯例,先把w3c的官方文档看一遍:CSS3 text-shadow 属性

text-shadow: none|h-shadow v-shadow blur color;

none:无阴影,默认值。

h-shadow:设置对象的阴影水平偏移值。可以为负值

v-shadow:设置对象的阴影垂直偏移值。可以为负值

blur:设置对象的阴影模糊值。不允许负值,可以缺省。

color:设置对象的阴影的颜色。 可以缺省。缺省的时候默认是#333深灰色,不是黑色。

在学习各种效果之前,我认为你应该明白,阴影核心其实是对原来对象的复制

比如我复制了两个原对象,并设置了它的偏移值、 模糊值和颜色。

.ts1{
	text-shadow:10px 20px 1px #666,20px 40px 3px #999;}

阴影就是复制.png

下面来看看text-shadow强大的立体效果。

先为所有demo统一设置样式:

.demo{
	width:400px;
	padding:30px;
	background-color:#ccc;
	font:bold 50px/2 "microsoft Yahei";
	color:#333;
	text-transform:uppercase;
	margin-bottom:20px;}

1、最常见的大量文字段落的简单阴影效果

.ts2{
	font-size:16px;
	text-shadow:0 1px #eee;
	color:#121212;}
.ts3{
	background-color:#666;
	color:#eee;
	font-size:16px;
	text-shadow:0 1px #121212;}

大段文字阴影效果.png

这样的阴影要求是简单有质感,重点是黑白灰的反差对比产生效果。文字深色,背景亮色,阴影比背景更亮一点。文字亮色,背景深色,阴影比背景更深一点。需要看起来若有若无,但是比没有又更有细节上的质感。这种效果仅需要y坐标向下移动1px,水平和模糊都没有。

2、常见的x、y正向偏移文字阴影效果

.ts4{
	background-color:#ddd;
	color:#fff;
	text-shadow:2px 2px #777;
	}

text-shadow案例展示.jpg

3、凸起的效果,有点像轻微的浮雕

.ts5{
	text-shadow:-1px -1px #fff,1px 1px #333;
	color:#ccc;
	background-color:#888;}

text-shadow案例展示1.jpg

高光在左上,暗面在右下,所以高光x、y都是负值,暗面x、y为正值。切换高光和暗面的正负可以产生相反的凹效果。如果熟悉ps的样式面板会更好理解。知识都是相通的。还有一点,就是颜色的对比。

4、凹下去的效果,和凸出的效果刚好相反。

.ts6{
	font-family:Verdana, Geneva, sans-serif;
	color:#666;
	text-shadow:-1px -1px #000,-2px -2px #333,1px 1px #fff,2px 2px #eee;}

text-shadow凹效果.jpg

做了两层,看起来凹的更厉害。关键就是阴暗面在左上,亮面在右下。

5、文字阴影半透明立体效果

.ts7{
	font-family:Tahoma, Geneva, sans-serif;
	color:rgba(203,29,77,.5);
	text-shadow:-5px -5px rgba(70,232,240,.5);}

text-shadow透明效果.jpg

关键是利用rgba的半透明效果,实现了叠加。

6、3D立体效果

.ts8{
	background-color:#333;
	color:#1C9F96;
	text-shadow:1px 1px #BAE6EF,2px 2px #BAE6EF,3px 3px #BAE6EF,4px 4px #BAE6EF,5px 5px #BAE6EF;
	}

text-shadow3d效果.jpg

做3D效果的关键是阴影一层一层的叠加,也就是复制一个又一个的对象,每一次的偏移比上次的多1px,颜色完全一样。负值可以产生反方向的3D效果。

7、仿古体字效果

.ts9{
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#eee;
	background-color:#666;
	text-shadow:5px 5px #666,7px 7px #eee;}

text-shadow仿古体字效果.jpg

效果的核心就是第一个阴影颜色和背景色一样,第二个阴影颜色和文字颜色一样。

8、荧光棒效果

.ts10{
	background-color:#000;
	color:transparent;
	text-shadow:0 0 5px #FFFF66,1px 1px 1px #fff,-1px -1px 1px #fff,0 0 10px #FFFF99,0 0 20px #B9EB50;}

text-shadow发光效果.jpg

关键点是文字使用的transparent透明色,所以文字本身不见了,通过白色描边,再前后加上了一定模糊的阴影,好像夹心饼干一样。

9、利用opacity实现半透明花纹字体

body{
	background:url(images/body_bkg.png);}
.ts11{
	background-color:#222;
	color:#333;
	opacity:.4;
	text-shadow:-1px -1px rgba(255,255,255,.3),1px 1px rgba(0,0,0,.8);
	}

text-shadow透明度效果.jpg

文字和背景颜色一致,高光和阴暗面采用了rgba的方式,对白色和黑色用了透明度的效果,更柔和,再利用opacity可以实现半透明的效果,看到了背景的花纹图片。

10、文字描边样式

如果使用阴影来描边文字,会发现文字的转折处都有断点,稍微不好看。

.ts12{
	color:#fff;
	text-shadow:-1px 0 #666,0 -1px #666,1px 0 #666,0 1px #666;
	}

text-shadow文字描边.png

有一个webkit前缀的专用属性text-stroke,可以实现为文字描边,但是这个属性是-webkit-私有的,火狐还有IE类的浏览器是不支持的。

.ts12{
	color:#fff;	
	-webkit-text-stroke:1px #666;/*文字描边*/
	}

文字描边.jpg

可以发现利用text-stroke描边文字是没有断点的。

11、3D渐变模糊投影

.ts13{
	color:#0DCFDF;
	text-shadow: 0 0 2px #686868,0 1px 1px #ddd, 0 2px 1px #d5d5d5, 0 3px 1px #ccc, 0 4px 1px #c5c5c5, 0 5px 1px #c1c1c1, 0 6px 1px #bbb, 0 7px 1px #777,0 8px 3px rgba(100,100,100,0.4),0 9px 5px rgba(100,100,100,0.09),0 10px 7px rgba(100,100,100,0.14),0 11px 9px rgba(100,100,100,0.2),0 12px 11px rgba(100,100,100,0.24),0 13px 15px rgba(100,100,100,0.29);
	background-color:#fff;
	}

text-shadow渐变模糊投影.png

此3D投影相比与纯色的3D投影,看起来更有立体和阴影的质感。只是颜色由浅入深,慢慢增加模糊值,对深色使用了rgba半透明度,可以叠加的更加柔和立体。

综上所述,文字的阴影效果其实就是一层一层的复制叠加,可以为一个复制出来的对象设置偏移值和模糊值,还有颜色。

多观察,多实践,多思考,根据具体的网页需求设计出不同的文字阴影效果。

这篇文章弄了好几天,遇到阶段性结课考试,又遇到很多的不愉快,接下来又是一个月的补课,还有立项的课题要研发,我觉得自己有点hold不住了,昨晚居然被肚子痛醒了,看来身体真的在警告我。我需要休息和放松,求“有了一千万该怎样花的答案”……

点赞


36
保存到:

相关文章

  • 评论列表:

发表评论:

◎请发表你卖萌撒娇或一针见血的评论,严禁小广告。

Top