如何使用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(4) views10481 comments0

发送私信

最新评论

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

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

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

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

  • WebAssembly工作原理和JavaScript语言性能对比分析

    本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...

  • React JSX语法简介

    JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...

  • CSS3人行走动作图解和动画实现

    对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...

  • 如何使用CSS3合成模式(blend-mode)和滤镜(filter)实现彩色蜡笔(时光机)照片特效

    在之前的文章中我们已经详细讲解过CSS3滤镜(filter,也可称之为过滤器)的工作方式,本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
    我们...

  • 使用HTML5 FileReader和Canvas压缩用户上传的图片

    手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...

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

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

  • 三维向量的简单运算和实用意义

    在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...

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

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

  • Three.js入门教程4 - 创建粒子系统动画

    嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。

  • WebGL入门教程5 - 详解纹理滤镜(Texture Filter)

    WebGL中使用纹理贴图来实现细腻的物体表面观感,其中一个重要的参数是纹理滤镜(Texture Filter)。
    这个参数用来处理当对象出现缩放时,纹理如何处理中间...

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

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

  • 更多...