如何使用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(12) views11781 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 微信公众号在线生成二维码带参数怎么搞?

    带参数二维码是微信公众号渠道二维码的一种实现
    微信的带参数二维码有两种,一种是临时二维码,一种是永久二维码,但是永久二维码的生成是有个数限制的,微...

  • 3D感知和建模关键硬件技术:双目、3D结构光和TOF

    无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...

  • CSS3原生变量(Native Variables)新特性简介

    对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
    变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...

  • Web界面编程状态变化和JS开发框架(React/Angular/Ember)

    UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,...

  • HTML5、Hybrid APP、Native APP对比和技术选型

    HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...

  • Three.js 对象局部坐标转换为世界坐标

    在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...

  • Three.js入门教程6 - 创建全景图和纹理

    全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...

  • IE各版本CSS Hack(兼容性处理)语法速查表

    为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...

  • jQuery Ribbles - 基于WebGL的水面涟漪动效插件

    使用jQuery

  • D3.js读取外部json数据

    D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...

  • 如何使用纯CSS3实现一个3D泡沫

    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble

  • 如何使用CSS3/SCSS实现逼真的车窗雨滴效果

    在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop

  • 更多...