本節書摘來自異步社群《衆妙之門——網頁設計專業之道》一書中的第2章，第2.3節，作者： 【德】smashing magazine 譯者： 趙俊婷 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
随着主流浏覽器對css3功能的支援和完善，設計界似乎對這一新的進展和發展潛力十分興奮。每個人似乎都在嘗試css3，無論是在rgba透明度、先進的css3選擇器、css3變換或其他屬性上。結果是令人驚訝的，我們見識到越來越多的網站比以前更加美觀、先進、多功能、強大，并且阻擋了更多的讨厭的浏覽器黑客。
到目前為止，最受歡迎的css3功能似乎是圓角（border-radius）、動畫（animation）、多背景（multi-background）和盒陰影（box-sholow）。這點很容易了解，因為它能用來替換早期古怪的解決方案，可以用所需的工作區和第三方工具來執行任務。此外，@font-face正在迅速普及，但是請明确，它并不屬于css3功能，因為它是被css2提出的，并且應用于早期的ie浏覽器版本中（此後才是其他的浏覽器——火狐3.5及以上版本、safari3.2及以上版本、chrome4.0及以上版本、opera10.1及以上版本）。這就是為什麼現在你可以在設計中安全地使用@font-face。
現今最受歡迎的浏覽器（如ie浏覽器版本家族中的）隻支援css3盒大小（box-sizing）屬性。ie或ie8浏覽器廣泛支援css3屬性選擇器([att$=val]、[att^=val]等）群組合器(e~f)，但是不支援css3僞類(:nth-child()、 :last-child等）。ie9浏覽器支援css3媒體查詢、css3色彩 (hsl、hsla、rgba)、css3選擇器和圓角。以前，通過純css3設計似乎是不可能的，現今已經實作，并推動了設計界的創新思維。我們或許已經進入了資源豐富的網絡新時代，當關鍵的css技術誕生後，如2003年～2005年時期，css精靈（sprite）和css滑動門也被開發出來。實際上，我們可以期待令人興奮的創意時代的到來。
sxsw beercamp
在sxsw beercamp的設計中，創作者提出了一些十分大膽的想法。對于頁面頂部的每一個字母，他們使用了49次文本陰影（text-shadow）屬性。此外，還應用了各種動畫和轉換效果，以及盒陰影和hsla。順便提及一下，你是否注意到頂部的日出效果？這一效果是設計師通過使用20個“
”标簽來實作的。
tapbots
當巧妙地将細節添加到簡潔、簡單和含義豐富的設計中時，css3就能發揮出最佳狀态。tapbots使用css3來得到圓角、滑鼠懸停和一些透明效果，這些效果起初不容易發現。這是一個css3功能應用得當的好例子：沒有加粗的、帶陰影的标題，沒有誇張的漸變和過多的動畫，有的隻是紮實的、優秀的設計。
full frontal
文本陰影屬性似乎特别有效果，尤其是當淺色的文本陰影被應用在深色的背景上時。這又是一個深色文本陰影（比背景稍微深一點）應用在白色的标題上的簡單例子。此外，網頁還使用圓角和盒陰影來處理每個發言者描述下方的快速連結。
going steady with stacey
有時候使用深色的文本陰影搭配淺色的背景效果也不錯。但是在這種情況下，你或許想自己添加一個更“強烈”的文本陰影。
css3下拉菜單
一個更為實用的css3功能，即使用圓角、盒陰影、漸變和文本陰影處理多層次下拉菜單來達到良好效果。此處沒有使用圖像。
kristof orts
kristof orts使用文本陰影屬性來為标題添加深度。浮雕效果幹淨利落，使字型脫穎而出。
css3 experiments: moon
dan cederholm已經準備了一個漂亮的css3示範來說明現今設計師可以在設計中使用的一些新功能。尤其請注意其邊欄的微妙動畫——css-transition
（轉換）和css-animation（動畫）。設計師為使用者提供了更佳的視覺享受，創造了更多具有響應能力和參與性的互動。
faruk ates
faruk ates的部落格是使用css3動畫和轉換來達到很好的滑鼠懸停效果的實踐範例。請注意在充滿活力的藍色背景上文本陰影的有效利用。
mindgarden
mindgarden使用了css3媒體查詢來呈現在不同分辨率下的不同布局。使用寬屏浏覽器視窗的使用者會得到多列布局，使用小浏覽器視窗的使用者隻會看到一欄。此外，圖檔的尺寸會根據使用者螢幕的大小自動縮放。網頁設計師多年以來一直使用javascript來達到這個目的，但是現在，我們可以使用基于css的解決方案來建立自适應布局。媒體查詢是css3的擴充媒體類型，能夠讓設計師在站點渲染布局上有更多的控制。它們目前支援火狐浏覽器3.6及更高版本、safari 4及更高版本、opera 10及更高版本，以及chrome。不支援ie8浏覽器。
chirp
chirp會議網站采用了css動畫來得到演講者照片的旋轉動畫效果。
bello and proxima nova: type experiment
在tim brown的試驗中，他使用了漸變（gradient）、遮罩（masking）、圓角、轉換和多背景圖像。當滑鼠懸停時，頂端的标題看起來與衆不同。
neography css3 type experiment
此處沒有使用圖檔，隻是單純地使用css3轉換、旋轉、陰影和其他調整。
css posters
設計師正在嘗試使用不同的布局技巧和css3技術。這裡的例子是用簡單的css規則設計的。事實上，是一種使用@font-face的非常簡單的字型嵌入方法。但是它看起來十分不錯，并且很好地達到了其目的。
david desandro:頁腳
david desandro在他的網站頁腳使用了多種css規則。陰影、動畫和轉換都非常生動，色彩豐富且具有吸引力。這是大多數網站使用css3代碼片段和微妙的css3技術的一個相反面。
使用css的opera logo
在css3中，多種視覺效果的實作成為可能。帶有一點藝術創造力，你可以創造出真正不平凡的事物。例如，此處opera的logo就是純css3設計的：漸變、陰影和圓角。
rain drop
該“雨滴”效果是又一個通過純css3技術達到視覺效果的有趣例子。
關于文本陰影令人遺憾的消息
現今，我們通過觀察發現，在使用css3上存在一個普遍的問題，那就是在設計時使用css3隻是為了好看。一個最好的證明就是文本陰影的過度使用，有時會被大量用于标題和正文。請謹記，css3是一個強大的工具，也是有效率的工具，但是很容易被濫用，造成新一輪的實用性和可讀性問題。這似乎是個再明顯不過的道理，但是仍然值得提及：css3添加到網站之前，確定隻用來加強效果，添加的目的是為了美觀和實用，而不是以犧牲實用性來達到美觀的目的。一個明顯而重要的規則是：你的設計不應該依賴于css3的改進，而是應該為使用者使用現代浏覽器融入豐富的附加層。先進的css3屬性的不足之處是：由于它們尚未标準化，而且由于gecko和webkit需要專有的屬性才能實作一定效果，在相當長的幾年内，我們或許會以包含無用風格的相當臃腫的樣式包來結束。是以，你可能會想要提取所有的css3增強的獨立的樣式表，以簡化日後的維護。此外，謹記css3碼應該總是由标準化css3規則結束（如圓角）。這樣做的話，你可以確定在未來的幾年，css3規則在新版本網頁浏覽器中得到更好的支援，實際上你的規則仍然要适應主流的浏覽器。
media twitter
在windows系統上，通過文本陰影設定的導航、标題、正文在預設的文本設定情況下會很難閱讀。有時候實在沒有必要使用文本陰影來處理正文、副本和導航部分，這樣做會影響仍然使用舊版本浏覽器的使用者的閱讀體驗。
brandon cash
brandon cash采用文本陰影屬性處理其正文部分。盡管文字還是很清晰，但是比起純文字，閱讀起來還是困難得多。比較chrome浏覽器（左邊）和safari浏覽器（右邊）的視圖，差異十分顯著。很可能使用者沒有使用cleartype或其他任何版本的字型平滑工具。作為一名設計師和使用者需求倡導者，你不得不考慮這個問題。