福利來咯！本期節目我們為大家整理了50個展示CSS3魅力的優秀網站，一定會讓你大開眼界。記得啟用高級瀏覽器欣賞。在這個CSS3和Html5風靡的年代，這些優質的資源更顯得彌足珍貴，具有極高的研究價值！有了CSS3，你確實能夠化腐朽為神奇，而且最新版本的CSS3在眾多瀏覽器都有良好的兼容，甚至是萬年不變的IE！在技術方面，CSS3的字體、圖片較前幾個版本都有了長足的進步。話不多說，趕緊收藏！

相關推薦：
《網頁設計的3秒法則！打造出眾的第一印象》
《讓閱讀更時尚！25例雜志風格網頁設計》
《應該怎么做？網頁設計師才不會落伍》

01. Envoy

CSS轉換功能被用在了這個網頁上Envoy，這是一個辦公室訪客登記軟件，界面仿ipad，里面可以填寫的信息有姓名、簽名以及留下的痕跡。除了網頁版，它還提供手機或者平板App。

這款軟件初始的目的是告訴主人，客人在自己的辦公室里做了些什么，進行了哪些操作。 為了實現這一目標，這個網站使用了app的功能，屏幕也是模仿ipad，當你滑動頁面時，它會自動更新，CSS轉換的作用就在此。

"我們花了很長時間去處理細節問題，并且為自己的設計感到十分滿意！"網站聯合創始人如是說。

02. O Music Awards

Happy Cog使用了CSS很多功能，才做出了上面這個頁面。MTV為第四屆網絡音樂節建立了一個新網站，由Happy Cog操刀制作，這個網站運用了很多不同的CSS功能，并將它們整合到一起，最終得到這樣的效果。

"我們的設計充滿活力且獨一無二，在使用CSS時，我們勇于創新，獨辟蹊徑，用了很多平時不被允許的點子。"工程師Stephen Caver如是說。

在這個網站中你能看到CSS的加強功能，如漸變、轉換以及透明度等。比如它的圓形頭像周圍設置了邊框，后面很巧妙的搭配了一個弧形，極具現代氣息。 同時這還是個響應式網站，即使某些頁面的布局非常復雜。"在制作時確實有些圖層放置問題很棘手，不過將這些本來未知的問題KO的感覺也是非常好的~"Caver如是說。

03. SquareSpace

在SquareSpace中，CSS變換和動畫功能被用來加強設計和交互。Squarespace 是一個強大的、一站式網頁，有很多定制的選項，讓用戶能自己制作獨一無二的模版，加上有趣的導航。

"Squarespace的設計團隊在設計現在的導航前，還嘗試過其他的樣式。我們最終還是舍棄了前面幾個設計，因為現在這版允許我們將幾個鏈接放在一起，而不是分散到整個頁面。"前端工程師Kenneth Cachia如是說。

CSS變換和動畫被用來加強設計和交互， 漂亮的Hoefler & Frere-Jones字體被用來吸引人們的注意，Cachia說這個網站集"干凈的頁面、字體、圖標以及引人注目的圖片等細節之美于一體。"

04. Rent.com

Rent.com一個US公寓租賃網站，使用了分離的CSS文件，IOS、BlackBerry以及Android均可下載使用。

在聽了Scott Jehl關于RWD的講話之后（Filament Group），公司決定對網站進行重新設計。更新版是一個非常易于使用的響應式網站。

"從設計的角度來看，我們將重心放在了圖片和中心文字上，底層有大幅房間縮略圖，點進去之后會顯示更多圖片。"Todd Parker如是說。

這個網站的設計很簡潔，像剛摘下來的黃瓜一樣清新，很好的利用了白色空間。一個合理的設計可以將用戶的目光集中在你想要表達的內容上，這對于房屋租賃網站來說非常重要。 在網站中你還會發現極妙的CSS漸變、透明度以及動畫設置。

05. MoreSleep

MoreSleep，一個 Berlin創意代理商，網站像血管一樣。

"我們的目標就是通過網站有選擇性的展示三個能代表我們專業知識的項目。"技術總監Torsten Bergler如是說。 大大的字體，整潔的滾動效果，對比性極強的亮紅色這些設計讓整個網站從眾多候選者中脫穎而出。

"獨一無二的這個作品所表達的含義，想象一下，這些錯綜的血管一步步指導著用戶了解我們的故事，這是一件多么了不起的事情。" CSS轉換工具讓頁面和內容之間的轉換更加順滑，背景大小調整功能被用來控制不同尺寸下的圖片縮放效果。

06. Thankful Registry

Thankful Registry是一個為新婚夫婦準備的網站，在這里夫婦可以寫下一個獨一無二、有個人特色的婚禮登記表，可以是任何他們想要的東西。網站由Crush + Lovely制作，Jeff Schram和Michael Phillips是網站的前端工程師，他們希望CSS能像ps設計一樣漂亮，所以花了很多時間仔細計劃了SCSS結構。

"我們制作了一個響應式系統，你可以滑下整個頁面來顯示主要導航選項，這種設計讓我們能夠將目光集中在美麗的圖片中，同時也給了用戶獨一無二的響應式體驗。" Schram如是說。

07. The Brackets

United Pixelworkers和Dribbble聯手制作了The Brackets，第一年度NCAA錦標賽向所有網民和設計社區開放。這個網站美麗簡單，即使你不喜歡籃球也值得參觀一下。

"我們使用了Simple Bracket，它讓網站便于管理；招募Shopify 和 Squarespace改善各種獎項。"曼聯工程師Nathan Peretic如是說。"整個網站非常有意思，我們計劃每年都對其進行更新，讓網站更大更好。"

08. Windows of New York

這個網站提醒我們：永遠不要停止尋找。紐約窗戶是一個每周插畫精選網站，它是平面設計師José Guizar的私人項目，José Guizar解釋說"做這個項目是為了促使我自己發展個人插畫風格。"

09. Life in my Shoes

life in my shoes是一個強大的、主要以青少年為服務對象的平臺活動，為人們緩解對HIV的恐懼和誤解。它的總部位于倫敦，是一家數字代理公司，公司堅信，做網站能吸引青年觀眾。

裝飾性的圖片和搶眼的明黃色給人一種別致的美感。"about us"頁面可根據平板電腦和智能手機的尺寸調整其自身大小。

10. Solo

Solo是一個一體化管理工具，主要針對于自由職業者。它花費少且易于使用，是集功能性、實用性、美觀性于一體的軟件。

這個網站展示產品頁面全部都是由CSS3制作的，"一開始我決定用HTML5和CSS3，并且只提供現代瀏覽器版本，因為在前期調查中我們發現，只有百分之三的用戶使用IE訪問主頁。因為我們的目標市場不在IE，所以沒必要支持它。"APP設計者Jerome Iveson如是說。

11. Form Follows Function

網站的風格是極簡，頁面使用了金色和有趣的字體。Form Follows Function （FFF）是一個用HTML5和CSS設計網頁極好的例子，設計者是一位來自韓國的工程師Jongmin Kim，他是一位交互工程師，現在在紐約的Firstborn Multimedia工作。Kim說這個網站的名字反應了自己的目標，即"追求負設計"將所有功能熟記于心。他還說自己是個偏執的極簡主義者，所以網站設計的非常簡單。

12. Branch

主頁使用了CSS，做出了干凈的網狀結構Branch致力于為廣大用戶提供最新的交流方法，主頁使用了CSS打造了極簡且干凈的多個選項。

13. The Gently Mad

大副標題和章節列表很好的傳達了個人設計理念The Gently Mad是一個關于網頁開發者的播客。創始人Adam Clark使用了CSS3轉換工具和逐漸褪色功能，他告訴我們，"我覺得我的每一個設計單獨看效果會更好。"

14. Amazee Labs

CSS精美樣例使用現代Drupal框架，Amazee Labs可以為你的品牌制作新鮮的網站或社區，因為制作技術非常高超，他們的網站被視為CSS教學模版。他們已經為很多領域的公司制作過網站，都得到了非常好的反響。

15. A&W

"因為我們深愛著A&W，所以必須用一種方式留住美好的回憶，并與大家分享。"創意總監David Coomer闡述了網站制作的初衷。這個網站使用了CSS旋轉轉換，那你看得出在哪嗎？

—————-完——————

翻譯小組：優設網SDC翻茄匠 微博ID: @豆池麥
原文地址：creativebloq

本文由優設網原創翻譯，轉摘請注明優設網譯文出處，謝謝各位小編。

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量62萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：