10个新鲜的CSS3文本效果制作与Web排版教程推荐

在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