开发者社区> 华章计算机> 正文

《响应式Web设计:HTML5和CSS3实践指南》——2.7节使用CSS3制作3D文本

简介:
+关注继续查看

本节书摘来自华章社区《响应式Web设计:HTML5和CSS3实践指南》一书中的第2章,第2.7节使用CSS3制作3D文本,作者(美) Benjamin LaGrone,更多章节内容可以访问云栖社区“华章社区”公众号查看

2.7 使用CSS3制作3D文本
在前几节中,我们使用画布元素创建了投影、斜面以及内侧阴影。使用CSS3可以让文本真的站起来。使用CSS3的text-shadow属性,可以让文本看起来好像伸出屏幕来面对用户。

2.7.1 准备工作
如果你想直接跳过本节,你可以从Packt Publishing的网站上下载代码。否则,如果你想边学边做,那就一起来创建属于你自己的3D文本吧。下面将通过组合多个CSS3的阴影效果来实现3D特效。

2.7.2 实现方式
在IDE中,创建一个在body元素中只有一个header元素的HTML文档。在head标签中设置一些样式,并给header元素设置color: #f0f0f0;,如下面代码片段所示:


f6d32c763f3f0027f2f98580529282aa606fe1ad


5907682a961af942e4a8e2dec284c9e8e9832847


1105d0cbaf43cba73cf6be6698bcb7c167e3cfa0

2.7.3 工作原理
尽情试验和体验本方法的不同组合方式,来实现那些令人欢呼的字体效果。CSS3将字体设计带到了一个全新水平,而之前要想达到如此深度的定制特效却总是苦难的事情。CSS3不仅做到了,并且做得很好。
text-shadow属性可以处理大量的阴影属性。因此,你可以把这些阴影按照与文本之间的距离依次堆叠起来。随之而来的,你的文本拥有了3D特效。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Web 码网页必备 (HTML5 CSS3 ECMAScript6 )
Web 码网页必备 (HTML5 CSS3 ECMAScript6 )
43 0
uiu
【WEB前端开发】基础知识大总结(HTML5+CSS3)(下)
【WEB前端开发】基础知识大总结(HTML5+CSS3)(下)
67 0
uiu
【WEB前端开发】基础知识大总结(HTML5+CSS3)(上)
【WEB前端开发】基础知识大总结(HTML5+CSS3)(上)
125 0
Web前端开发笔记——第三章 CSS语言 第八节 CSS3文本文字设置
Web前端开发笔记——第三章 CSS语言 第八节 CSS3文本文字设置
54 0
【Web前端】CSS3新特性
新增的CSS3特性有兼容性问题,ie9+才支持 移动端支持优于 PC 端 不断改进中 应用相对广泛 现阶段主要学习:新增选择器和盒子模型以及其他特性
100 0
web前端学习(三十)——CSS3图像透明/不透明、拼合技术的相关设置
web前端学习(三十)——CSS3图像透明/不透明、拼合技术的相关设置
83 0
web前端学习(二十九)——CSS3提示工具的相关设置
web前端学习(二十九)——CSS3提示工具的相关设置
63 0
web前端学习(二十八)——CSS3下拉菜单的相关设置
web前端学习(二十八)——CSS3下拉菜单的相关设置
232 0
web前端学习(二十七)——CSS3导航栏的相关设置
web前端学习(二十七)——CSS3导航栏的相关设置
113 0
web前端学习(二十六)——CSS3组合选择符、伪类伪元素的相关设置
web前端学习(二十六)——CSS3组合选择符、伪类伪元素的相关设置
59 0
web前端学习(二十五)——CSS3布局(水平 & 垂直对齐)的相关设置
web前端学习(二十五)——CSS3布局(水平 & 垂直对齐)的相关设置
97 0
web前端学习(二十四)——CSS3浮动属性(float)、清除浮动属性(clear)的相关设置
web前端学习(二十四)——CSS3浮动属性(float)、清除浮动属性(clear)的相关设置
100 0
web前端学习(二十三)——CSS3定位(position)、元素裁剪(clip)及鼠标样式(cursor)属性的相关设置
web前端学习(二十三)——CSS3定位(position)、元素裁剪(clip)及鼠标样式(cursor)属性的相关设置
145 0
web前端学习(二十二)——CSS3元素的显示(display)、可见性(visibility)与溢出(overflow)属性的相关设置
web前端学习(二十二)——CSS3元素的显示(display)、可见性(visibility)与溢出(overflow)属性的相关设置
89 0
+关注
华章计算机
文章
问答
视频
来源圈子
更多
+ 订阅
相关电子书
更多
PWA:移动Web的现在与未来
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
相关实验场景
更多