如何使用CSS3实现一个平滑的3D文本标题
要实现3D文本,基本上有3种方法:
1. 使用CSS3的投影滤镜(filter: drop-shadow)
2. 使用3d建模和CSS3 3d变换来实现(最真实)
3. 使用CSS3 text-shadow属性来实现(最简单,可复制,现代浏览器都支持)
本例简单说明使用text-shadow属性来实现3D文本的原理和方法。
这依赖于text-shadow属性的两个特性:其1是该属性可以给文本添加投影效果,其2是可以在单个元素上应用多个投影效果。
先贴一张效果图预览下:
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
上面的样式代码可以被复用到您自己的文本标题上。
你也可以自己在线试试看。
最新评论
- 相关文章
OpenGL/WebGL顶点坐标变换过程简介
世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...
HTML5 And Canvas 2D Specs Are Now Feature Complete, First HTML 5.1 Working Draft Published
We’ve been writing about HTML5 for quite a while, but, until today, the actual HTML5 specs and standards were still moving targets. Now, however, the...
Blender2.7给平面模型添加纹理贴图
在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...
React JSX语法简介
JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...
使用CSS3 box-decoration-break特性实现多行文本样式
当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
按照规范...HTML5动画背后的数学2 - 仿生智能算法综述
三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...
Three.js入门教程6 - 创建全景图和纹理
全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...
IE各版本CSS Hack(兼容性处理)语法速查表
为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...
WebGL入门教程2 - GPU基本概念和工作流水线(渲染管道)
如何基于Canvas来模拟真实雨景Part2:重力掉落和雨滴融合
更多...