利用CSS3參考手冊和CSS3代碼生成工具加速來學(xué)習(xí)網(wǎng)頁制
發(fā)布時間：2012-07-11 14:37:53 作者：佚名 
我要評論
我要評論使用CSS3進(jìn)行前端設(shè)計是未來的發(fā)展趨勢。因此，如果你是一名前端設(shè)計師，就需要掌握這些最新的技術(shù)，否則就有可能會被淘汰。
CSS3技術(shù)現(xiàn)在越來越成熟，通過CSS3的一些新特性（如box-sizing、邊界半徑、文字陰影、漸變等）創(chuàng)建的效果已經(jīng)令前端開發(fā)者興奮不已。使用CSS3進(jìn)行前端設(shè)計是未來的發(fā)展趨勢。因此，如果你是一名前端設(shè)計師，就需要掌握這些最新的技術(shù)，否則就有可能會被淘汰。
一、參考手冊
1. Idiomatic CSS
編寫統(tǒng)一、符合習(xí)慣的CSS的原則，有中文版本。
2. CSS3 Click Chart
示例代碼和CSS3特性支持情況表。
3. CSS3 Selector
CSS3 Selector的官方指導(dǎo)手冊。
4. HTML5 & CSS3 Support
主流瀏覽器對HTML5和CSS3支持情況一覽表。
5. CSS3 - Information and Samples
針對CSS3的各種信息和示例。
6. Sencha CSS3 Cheat Sheet
7. Smashing Magazine CSS3 Cheat Sheet
二、CSS代碼生成工具
1. Gradient Editor
一個強(qiáng)大的CSS漸變代碼可視化編輯器，類似于Photoshop的漸變設(shè)置界面。
2. Gradient
CSS3漸變代碼生成器。
3. Border Radius
邊界半徑（圓角）代碼生成器，通過設(shè)置四個角的半徑數(shù)字，即可自動生成代碼，且能夠直接預(yù)覽到效果。
4. CSS3 Generator
通過可視化形式設(shè)置各種屬性，包括文字陰影、輪廓、邊界、漸變、過渡等，并能夠自動生成代碼。
5. CSS3
針對邊界半徑、box陰影、背景漸變和不透明度的CSS3代碼生成器。
6. LayerStyles
如果你熟悉Adobe Photoshop，你會發(fā)現(xiàn)這個工具非常好用。
7. CSSWarp
自動生成路徑文本的CSS代碼。
8. Font Squirrel
生成woff、svg、eot和ttf格式的字體，并在CSS中使用。
9. CSS3 Maker
強(qiáng)大的CSS3代碼生成器。
10. CSS3 Tool
各種CSS3代碼生成工具集合。
一、參考手冊
1. Idiomatic CSS
編寫統(tǒng)一、符合習(xí)慣的CSS的原則，有中文版本。
2. CSS3 Click Chart
示例代碼和CSS3特性支持情況表。
3. CSS3 Selector
CSS3 Selector的官方指導(dǎo)手冊。
4. HTML5 & CSS3 Support
主流瀏覽器對HTML5和CSS3支持情況一覽表。
5. CSS3 - Information and Samples
針對CSS3的各種信息和示例。
6. Sencha CSS3 Cheat Sheet
7. Smashing Magazine CSS3 Cheat Sheet
二、CSS代碼生成工具
1. Gradient Editor
一個強(qiáng)大的CSS漸變代碼可視化編輯器，類似于Photoshop的漸變設(shè)置界面。
2. Gradient
CSS3漸變代碼生成器。
3. Border Radius
邊界半徑（圓角）代碼生成器，通過設(shè)置四個角的半徑數(shù)字，即可自動生成代碼，且能夠直接預(yù)覽到效果。
4. CSS3 Generator
通過可視化形式設(shè)置各種屬性，包括文字陰影、輪廓、邊界、漸變、過渡等，并能夠自動生成代碼。
5. CSS3
針對邊界半徑、box陰影、背景漸變和不透明度的CSS3代碼生成器。
6. LayerStyles
如果你熟悉Adobe Photoshop，你會發(fā)現(xiàn)這個工具非常好用。
7. CSSWarp
自動生成路徑文本的CSS代碼。
8. Font Squirrel
生成woff、svg、eot和ttf格式的字體，并在CSS中使用。
9. CSS3 Maker
強(qiáng)大的CSS3代碼生成器。
10. CSS3 Tool
各種CSS3代碼生成工具集合。
相關(guān)文章
CSS3 最強(qiáng)二維布局系統(tǒng)之Grid 網(wǎng)格布局
CS3的Grid網(wǎng)格布局是目前最強(qiáng)的二維布局系統(tǒng),可以同時對列和行進(jìn)行處理,將網(wǎng)頁劃分成一個個網(wǎng)格,可以任意組合不同的網(wǎng)格,做出各種各樣的布局，本文介紹CSS3 最強(qiáng)二維布局系2025-02-27- 本文介紹了如何使用CSS3的transform屬性和動畫技巧實(shí)現(xiàn)波浪式圖片墻,通過設(shè)置圖片的垂直偏移量,并使用動畫使其周期性地改變位置,可以創(chuàng)建出動態(tài)且具有波浪效果的圖片墻,同2025-02-27
CSS3模擬實(shí)現(xiàn)一個雷達(dá)探測掃描動畫特效(最新推薦)
文章介紹了如何使用CSS3實(shí)現(xiàn)一個雷達(dá)探測掃描的效果,包括夜色背景、蜘蛛網(wǎng)盤、掃描體的轉(zhuǎn)動效果、尾巴陰影以及被掃描到的光點(diǎn),通過HTML和CSS的配合,實(shí)現(xiàn)了豐富的動畫效果,2025-02-21- CSS3的Flexbox是一種強(qiáng)大的布局模式,通過設(shè)置display:flex可以輕松實(shí)現(xiàn)對齊、排列和分布網(wǎng)頁元素,它解決了傳統(tǒng)布局方法中的對齊、間距分配和自適應(yīng)布局等問題,接下來通過本2025-02-19
css3 實(shí)現(xiàn)icon刷新轉(zhuǎn)動效果
本文給大家介紹css3 實(shí)現(xiàn)icon刷新轉(zhuǎn)動效果，文章開頭給大家介紹了webkit-transform、animation、@keyframes這三個屬性，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，感興趣的朋友一2025-02-19- CSS3過渡屬性用于實(shí)現(xiàn)元素從一種樣式平滑過渡到另一種樣式,通過設(shè)置transition-property過渡屬性、transition-duration過渡時長transition-timing-function過渡函數(shù)和trans2025-02-19
CSS3實(shí)現(xiàn)動態(tài)旋轉(zhuǎn)加載樣式的示例代碼
本文介紹了如何使用CSS3創(chuàng)建一個簡單的動態(tài)旋轉(zhuǎn)加載樣式,通過定義一個帶有類名“l(fā)oader”的HTML元素,并使用CSS樣式和@keyframes規(guī)則來實(shí)現(xiàn)旋轉(zhuǎn)動畫,你可以根據(jù)需要調(diào)整樣式2025-02-19使用CSS3實(shí)現(xiàn)平滑的過渡動畫效果(實(shí)例代碼)
這篇文章主要介紹了如何使用CSS3的transition屬性實(shí)現(xiàn)平滑的過渡動畫，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-02-13
CSS3中使用flex和grid實(shí)現(xiàn)等高元素布局的示例代碼
本文介紹了使用CSS3中的Flexbox和Grid布局實(shí)現(xiàn)等高元素布局的方法,通過簡單的兩列實(shí)現(xiàn)、每行放置3列以及全部代碼的展示,展示了這兩種布局方式的實(shí)現(xiàn)細(xì)節(jié)和效果，感興趣的朋2025-02-11使用CSS3和SVG創(chuàng)建圓形進(jìn)度條動畫效果
CSS3和SVG的結(jié)合使用為網(wǎng)頁設(shè)計帶來了創(chuàng)新的動態(tài)視覺效果,本文通過一個圓形進(jìn)度條的動畫特效示例,展示了如何利用CSS3的動畫功能和SVG的矢量圖形能力來創(chuàng)建豐富的用戶交互體2024-10-24
