在CSS3中变化重大的一项便是与Web排版相关的技术。现在我们不需要使用任何JavaScript或图片即可实现丰富的文本样式效果。本文收集了10个非常实用的CSS3 文本效果制作与Web排版教程,希望你会喜欢。
1. Create Attractive Web Typography with CSS3 and Lettering.js
在该教程中我们将学习怎样使用基本的CSS标记来完成交互式排版设计,这里我们只使用最少的图像,并借助纯CSS3的魔力,另外,使用一个专门用于网页排版的jQuery插件——lettering.js让设计稍微更出色一些。
教程 /
演示
2. Create 3D Text Using CSS3
使用CSS3 text-shadow属性创建立体的文本效果,用于标题或段落标签非常不错。
教程 /
演示
3. 3D CSS Shadow Text Tutorial
同样,本教程将按部就班地演示如何创建3D字体,通过对多个CSS3文本阴影属性进行堆积实现。
教程 /
演示
4. Create True Inset Text Effect Using CSS3
除了默认的text-shadow,该教程还使用了inner shadow属性。
教程 + 演示
5. CSS3 Poster with No Images
体验CSS3强大之处的一个非常好的指南。使用到了Box-shadow、border-radius、@font-face、transform、box-sizing、text-shadow,以及BGRa技术。
教程 /
演示
6. Use Text Shadow with CSS3
该教程中介绍了可以使用CSS3 text-shadow实现的5种不同效果。
教程 + 演示
7. CSS3 Background-Clip: Text
在文本中实现渐变颜色效果。
教程 / [url=http://trentwalton.com/bgclip/]演示
[/url]
8. Create Inset Typography with CSS3
学习如何制作凹陷字体。
教程 + 演示
9. I Heart Blur
严格说来,这不是一个教程。不过代码值得研究一下,你可以学会为文本增加模糊效果的一招——通过使用大量text-shadow属性。
源码 /
演示
10. CSS3 Text-Shadow – Can It Be Done in IE without JavaScript?
在IE9中支持大部分CSS3属性,但是目前并不支持image-border及text-shadow这两个。在本教程中将对text-shadow进行讨论:关于它是如何在浏览器中工作的,以及怎么可以在IE中模仿它的效果。
教程+演示
Via
jquery4u
感谢
luiang1018 投递这篇资讯
已有 1 人发表留言,猛击->> 这里<<-参与讨论
ITeye推荐