網頁制作Webjx文章簡介：適應網頁設計新趨勢：CSS3、字體以及圖標.

很榮幸從事網頁設計業，新技術、新技巧越來越多，我們的工作越來越輕松，甚至不用設計軟件，利用網上的一些工具都能完成設計。

當然，若想更輕松的工作，就必須跟進新趨勢、新方法，本文介紹了網頁設計中一些新式設計方法。

CSS3可以稱得上是偉大，無論是開發者還是設計師都能從中受益。CSS3提高了網頁整體的表現，為我們的設計實驗提供了大量機會，讓我們可以把很多靈感付諸實踐。技術的提高，自然也帶來了很多問題，多設備瀏覽網絡，分辨率多種多樣，成千上萬的設別種類、屏幕尺寸應用場景，但不管怎樣，都要滿足用戶的瀏覽需求。

有問題便需要解決，解決問題需要知識，需要探索精神，我們需要不斷學習。

那這意味著什么？不可能為每一種設備一一進行設計吧？取而代之的是，我們需要改進工作流程。
我們的設計流程、開發流程需要迭代了，我們應該使用更多適應性較強的技術、元素。

別看CSS3剛出來不久，實際上，CSS3于1999年開始制定，花了14年！

跟前幾個版本的CSS不太一樣，CSS3劃分為好幾個模塊——2012年年中發布了超過50種模塊，有4種尤其值得推薦，經過了大量的討論、檢測，這4種可以說已經是很完善的了。W3C推薦的這4種模塊是：

Media Queries （媒體查詢）

Namespaces （命名空間）

Selectors (Level 3) （選擇器）

Colour（顏色）

還有一些模塊，比如 “Background and Borders”, “Multi-Column Layout”, “Flexible Box Layout” 作為“候選推薦”，也很值得關注。
還有一些例如 “CSS Animations（CSS動效）”, “CSS Transforms（CSS轉換）” and “CSS Filter Effects（CSS濾鏡效果）”,尚處于起草階段。

除了上面4種W3C推薦的模塊，還有很多CSS3技術也很流行。包括

CSS Gradients（CSS漸變）

Border-radius （邊框半徑）

Box-shadow （圖層陰影）

Multiple Backgrounds （多重背景）

Opacity (rgba) （不透明度）

Animations & Transforms （動效&轉換）

我們來看看細節：

CSS 漸變

CSS漸變的引入取代了背景圖像，無需圖像也可以打造漸變

為頁面減負，加載更快，而且，響應式問題也好解決。

邊框半徑

現在，我們可以用CSS打造圓角效果，不用修改圖像即可實現。非常方便的就能實現圖像的邊框、圓角、漸變、陰影的處理——過去想要達到這種效果，要費煞苦心，現在非常的方便。

如果你客戶是個明白人，那你就挺走運，要不然還得給他們解釋新技術。利用CSS可以實現多設備較為一致的體驗效果，圓角的優雅也無可替代！

圖層陰影

CSS3引入了圖層陰影，很簡單的就能添加投影。而且還支持文字！

跟漸變一樣，也不用修改圖片效果了，直接拿來就用，用CSS即可輕松實現。

多重背景

CSS3多重背景的引入提供了層次感極強的背景效果，極其美妙。

不透明度(rgba)

IE9向上兼容，終于不用制作重復的透明圖像了。這就是為何我喜歡CSS3,簡便、高效。

動效&轉換

讓你的網頁更具交互性，盡管設計起來很困難，但是倘若成功，你的網站會大為動人。