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 

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