锐英源软件
第一信赖

精通

英语

开源

擅长

开发

培训

胸怀四海 

第一信赖

当前位置:锐英源 / 开源技术 / 网站前端开发中级开源技术 / css3文字特效
服务方向
人工智能数据处理
人工智能培训
kaldi数据准备
小语种语音识别
语音识别标注
语音识别系统
语音识别转文字
kaldi开发技术服务
软件开发
运动控制卡上位机
机械加工软件
软件开发培训
Java 安卓移动开发
VC++
C#软件
汇编和破解
驱动开发
联系方式
固话:0371-63888850
手机:138-0381-0136
Q Q:396806883
微信:ryysoft

css3文字特效

css中新添加的css3CSS3提供了很多的设计上的新技术和高级功能,这给网页设计者们带来了极大的方便,网页设计需要的是新颖,美观并且能够让人眼前一亮,要想设计出好的网页,就需要不断的创新,不断的发现新的网页效果,这样一来,就给网页设计增添了不少难度,每个特效的实现都需要花费大量的时间来写大量的代码。有了css3的出现,就已经省了不少时间,首先我们来学习使用css3来做各种文字效果。

1.Inset Text(内阴影效果)

内阴影的文字效果是利用text-shadow属性根据不同光源制作出来的。我们在使用内阴影时需要注意三个颜色的配置问题,背景色,前景色,这三者结合起来才会有我们想要的效果。阴影色需要采用有一定的亮度对比色。

代码:
<style>
.insetText h2{
color: #f00;
text-shadow: 1px 1px 0px #212121;
}
</style> <div class="insetText"><h2>内阴影</h2></div>
效果如下所示:

内阴影文字

2.3D Text(3D立体效果)

3D文字没有用其他的标签属性,只是多次应用了CSS3中的text-shadow属性,进行多次阴影设置,并设置不同的阴影色,这样j就能得到我们需要的立体的文字效果。

代码如下:
 <style>

.insetText h2{
color: #f00;
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);
}
</style>
<div class="insetText"><h2>3D立体</h2></div>
效果如下所示:

3D立体效果

3.Text Embossing(浮雕效果)

浮雕效果我们同样也是使用text-shadow的属性来写的,我们在这里写的是背景色为暗色,前景色为亮色,下面我们来看一下代码:

 <style>
.insetText h2{
color: #f00;
text-shadow: 0 -1px 0 #374683;
}
</style>
<div class="insetText"><h2>浮雕效果</h2></div>
效果如下所示:

浮雕效果

这里我们提到了text-shadow,和text-shadow相似的是box-shadow,区别是一个是对文字效果的属性,一个是图层效果的属性,CSS3的box-shadow属性可以让我们实现图层阴影效果。

box-shadow属性的浏览器兼容性

先来看一个这个属性的浏览器兼容性:
Opera: 不知道是从哪个版本开始支持的,我在发这篇文章测试的时候,正好更新了Opera到最新的10.53版本,已经支持box-shadow属性。
firefox通过私有属性-moz-box-shadow支持。
Safari和Chrome通过私有属性-webkit-box-shadow支持。

如果我们把第一个例子中文字效果的text-shadow改为box-shadow,并给文字背景加上颜色,结果会是什么样的?

代码:
 <style>
.insetText h2{
color: #f00;
}
.insetText{
background:#FF9;
width:150px;
height:50px;
box-shadow: 1px 1px 0px #212121;
}
</style>
<div class="insetText"><h2>内阴影</h2></div>
效果如下所示:

图层阴影效果

友情链接
版权所有 Copyright(c)2004-2021 锐英源软件
公司注册号:410105000449586 豫ICP备08007559号 最佳分辨率 1024*768
地址:郑州大学北校区院(文化路97号院)内