如何使用CSS3实现一个平滑的3D文本标题

techbrood 发表于 2016-05-18 18:03:12

标签: css3, text-shadow, 文本阴影, 3D文本标题

- +

要实现3D文本,基本上有3种方法:

1. 使用CSS3的投影滤镜(filter: drop-shadow)

2. 使用3d建模和CSS3 3d变换来实现(最真实)

3. 使用CSS3 text-shadow属性来实现(最简单,可复制,现代浏览器都支持)

本例简单说明使用text-shadow属性来实现3D文本的原理和方法。

这依赖于text-shadow属性的两个特性:其1是该属性可以给文本添加投影效果,其2是可以在单个元素上应用多个投影效果。

先贴一张效果图预览下:

下载.png

text-shadow的工作原理

我们看下下面这张图就明白了:


text-shadow的语法

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

h-shadow是水平方向阴影位置,v-shadow是垂直阴影位置,blur是模糊度,color是阴影颜色

具体可参考W3School CSS3 参考手册:http://techbrood.com/cssref?p=css3-pr-text-shadow

具体实现代码

现在我们来构造叠加的阴影效果代码:

.text-3d {  
  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,.1),  
               0 0 5px rgba(0,0,0,.1),  
               0 1px 3px rgba(0,0,0,.3),  
               0 3px 5px rgba(0,0,0,.2),  
               0 5px 10px rgba(0,0,0,.25),  
               0 10px 10px rgba(0,0,0,.2),  
               0 20px 20px rgba(0,0,0,.15);  
}

这个效果的细节是调试出来的,前面几个是投影拷贝,后面几个加上淡色调模糊效果,以使得阴影平滑过渡,填补锯齿。

你可以使用踏得网的CSS3文本阴影在线生成工具来调试:http://techbrood.com/cg-text-shadow

上面的样式代码可以被复用到您自己的文本标题上。

你也可以自己在线试试看。

possitive(0) views9231 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • OpenGL/WebGL顶点坐标变换过程简介

    世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...

  • WebGL场景中多相机拍摄的原理和意义

    一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
    3D相机渲染的基本原理是依靠颜色...

  • 踏得网精选2016年度10大最佳HTML5动画

    踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...

  • Blender2.7给平面模型添加纹理贴图

    在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...

  • 常见面试题JavaScript闭包(ES5语法)

    JavaScript闭包(Closure)是常见的JS面试题,是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包,有意或无意间。比如编写一个jQuery鼠标点击处理函数:$(function()

  • 使用HTML5 Canvas实现的界面元素截屏功能

    如果网站出现问题,常常需要截图来提交反馈,这个功能很实用。使用HTML5的Canvas可以实现这个目标。我们首先引入

  • HTTP/2背景和新特性简介

    在前面的一篇文章中已经介绍了

  • WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解

    我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数...

  • WebGL入门教程1 - 3D绘图基础知识

    现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数...

  • 使用top/left/margin和CSS3 translate两种方法实现标题居中的性能差异详解

    要实现标题全屏居中(同时在垂直和水平方向居中),有若干种方法,包括使用弹性布局、表格单元、绝对定位、自动外边距和CSS3平移变换等。你可能已经使用了这些方...

  • Three.js 3D打印数据模型文件(.STL)加载

    3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...

  • 如何使用CSS3实现书页(书本)卷角效果

    我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...

  • SVG过滤器feColorMatrix矩阵变换效果用法详解

    在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...

  • 在PHP网页程序中执行Sass/Compass命令

    我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...

  • 更多...