现代 CSS

CSS3 制作文字特效

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

今天主要搜集了一些网页中文字用css3制作的特效,并亲自尝试了一下,现把关键的代码和效果贴出来与同学们一起分享,希望能对大家在平时的制作中有所帮助。废话不说,直接进入效果的制作,感兴趣的同学跟着我的代码制作一次,你肯定会有不少的收获。

Inset Text(内阴影效果)

内阴影的文字效果是利用text-shadow属性根据不同光源制作出来的。需要注意三个颜色的配置问题,背景色,前景色,阴影色需要采用有一定的亮度对比色,这样效果更佳,请看下面的效果。

				.insetText h2{
					color: #f00;
					text-shadow: 1px 1px 0px #212121;
				}
			

效果如下所示:

text-shadow的使用请点这里

3D Text(3D立体效果)

3D文字效果,在《CSS3的文字阴影—text-shadow》有详细介绍,这里没有使用其他的html标签,只是多次应用了CSS3中的text-shadow属性,进行多次阴影设置,并设置不同的阴影色,从而达到一个立体的文字效果。

			.text3D h2 {
				color: #fff;
				text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25);
			}
			

效果如下所示:

Neon Lights Effect(霓虹灯效果)

霓虹灯效果主要是多次使用text-shadow属性制作阴影,只是这里有一点需要注意,在制作阴影时不设置任何X轴和Y轴的值,只是设置其模糊半径值,并且每次的blur半径取值不同,而且后面的值总是比前面的值大。

				.neonText h2 {
					color: #fff;
					text-shadow:0 0 5px #CCCCCC, 0 0 10px #CCCCCC, 0 0 15px #CCCCCC, 0 0 20px #095816, 0 0 25px #095816, 0 0 30px #095816, 0 0 50px #095816, 0 0 80px #095816, 0 0 100px #095816, 0 0 150px #095816
				}
			

效果如下所示:

Letterpress Effect (凸版效果)

Letterpress Effect和前面的Inset Effect效果很相似,不同之处是Lefferpress使用模糊值产生一种立体效果。这种效果一般配合在有纹理的背景下使用。

				.letterpressText h2 {
					color: #222;
					text-shadow: 0px 2px 3px #555;
				}
			

效果如下所示:

Text Embossing(浮雕效果)

浮雕效果我们在这里分两种效果,其中一种是背景色是暗色,前景色是亮色,另一种是背景色是亮色,而前景色是暗色,下面我们先来看第一种:

				.embossing h2 {
					color: #FFFFFF;
					text-shadow: 0 -1px 0 #374683;
				}
			

效果如下所示:

第二种,背景色为亮色,前景色为暗色:

				.embossingTwo h2 {
					color: #737373;
					text-shadow: 0px 1px 0px #e5e5ee;
				}
			

效果如下所示:

Stroke Effect(描边效果)

在webkit内核的浏览器中我们可以使用text-stroke来制作文字描边或抽空的效果。

				.stroke h2 {
					color: #c00; 
					-webkit-text-stroke: 1px #000; 
				}
			

效果如下所示:

上面这种效果,在Firefox下可以模拟上面的效果

				color: #c00;
				text-shadow: 1px 1px 0 #000,-1px -1px 0 #000; 
			

在webkit还有一个text-fill-color制作一种抽空文字的效果

				.strokeTransparent h2 {
					-webkit-text-stroke: 1px #000;
					-webkit-text-fill-color: transparent;
				}
			

效果如下所示:

Anaglyphic effect(补色3D效果)

Anaglyphic text effect是一种制作透明度叠加的效果,非常类似于浮雕立体的三维效果图像,实现这种办法主要是使用前景色透明度(rgba)和阴影,如:

				.anaglyphic h2 {
					color: rgba(255, 100, 140,0.5);
					text-shadow: 3px 3px 0 rgba(80,255,0,0.8);
				}	
			

效果如下所示:

有关于CSS3的RGBA应用可以点击这里

Rotate Text(旋转文本)

旋转文本主要使用的是transform中的rotate属性来改变文本的方向,从而达到一种旋转文本的效果,具体实现代码如下:

				.rotate h2 {
					-webkit-transform: rotate(-90deg); 
					-moz-transform: rotate(-90deg);	
					-o-transform: rotate(-90deg);
					-ms-transform: rotate(-90deg);
					transform: rotate(-90deg);
					filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
				}
			

效果如下所示:

有关于transform更详细的介绍请点这里

Emboss Effect(浮雕效果)

采用上下不同色调,亮色为上,暗色为下,制作出浮雕效果:

				.emboss h2 {
					color: #ccc;
					text-shadow: -1px -1px #fff, 1px 1px #333;
				}
			

效果如下所示:

Blury Effect(模糊效果)

模糊效果是将前景色设置为透明,然后给其加上text-shadow,并只进行模糊度的设置:

				.blury h2 {
					color: transparent;
					text-shadow: 0 0 4px #f36;
				}
			

效果如下所示:

Background-clip:text(图片填充文字)

在webkit内核的浏览器下,使用background-clip:text可以制作出用背景图片填充文本的效果:

				.backgroundClip h2 {
					background:url("backgroundImage.png") no-repeat left top;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			

效果如下所示:

有关于更多的background-clip资料,大家可以点击这里查阅。

True Inset Effect

把inset效果和图片填充文字效果结合在一起,我们就可以制作出真正的插图文字效果,只可惜的是,现在支持这种效果的只有Chrome和Safari(也就是说只有Webkit内核)浏览器支持,下面看其实现代码:

				.trueInset h2 {
					background: #666;
					-webkit-background-clip: text;
					-moz-background-clip: text;
					background-clip: text;
					color: transparent;
					text-shadow: 0 3px 3px rgba(255,255,255,0.5);
				}
			

效果如下所示:

纹理文字

纹理文字效果是依靠一张图片,配合其他文字效果制作出来,其原理来源于webkit-mask-image,把图片当作一个遮罩,叠合文字,先看其html结构:

				<h2 class="grunge">Grunge Effect <span></span></h2>
			

纹理图片如下所示:

加上样式:

				h2.grunge {
					position:relative;
					color: #f06369;
					background: #000;
					text-shadow: 0 0 2px rgba(255,255,255,0.3), -1px -1px 0 #fcfcfc, 1px 1px 0 #ccc;
				}
				
				h2.grunge span{
					position:absolute;
					display:block;
					top:0;
					left:0;
					height:100%;
					width:100%;
					background:url("images/ground.png");
				}
			

效果如下所示:

这里有一点需要特别提出,h2背景色需要和图片颜色接近,从成造成一种假像(我一开始就吃了这个亏,没有设置好背景色)。给人视觉效果就是背景图片填充到文本中去了。同时也可以使用这种方法来制作文字的渐变效果,但需要注意的是图片的渐变色需要配合好文字的背景色。有关于这方面的解决大家可以看看nickla写的《CSS Gradient Text Effect》。更多的相关DEMO的制作可以拼命点这里

Gradient Effect

文字渐变效果是使用webkit-mask-image来制作,但这种效果只有Chrome和Safari支持。

html:

				<h1><a href="#">Gradient Effect</a></h1>
			

css:

			 h1 {
					position: relative;
					text-shadow: 1px 0 4px #006;
					font-family: Airal;
					}
				 h1  a {
					position: absolute;
					top: 0; 
					z-index: 2;
					color: #f36902;
					-webkit-mask-image: -webkit-gradient(linear, left top,left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
					text-descoration: none;
					}
				 h1:after {
					content: "Gradient Effect";
					color: #000;
					text-shadow: 1px 1px 1px #600;
				}
			

效果如下所示:

这种制作渐变效果,大家要是感兴趣可以参考Nice web type的《Pure css text gradient(no Pngs)》一文。

综合上面的效果,大家肯定深有体会,这些效果我们使用最多的一个属性就是css3的text-shadow,如果你还不了解这个属性,而又想了解,就点这里进入吧。

如需转载烦请注明出处:W3CPLUS

Mercurial Victory CR7 Low

返回顶部