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 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章