感受CSS3強(qiáng)大魅力！50個精選案例欣賞（上篇）

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

相關(guān)推薦：
《網(wǎng)頁設(shè)計的3秒法則！打造出眾的第一印象》
《讓閱讀更時尚！25例雜志風(fēng)格網(wǎng)頁設(shè)計》
《應(yīng)該怎么做？網(wǎng)頁設(shè)計師才不會落伍》

01. Envoy

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

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

"我們花了很長時間去處理細(xì)節(jié)問題，并且為自己的設(shè)計感到十分滿意！"網(wǎng)站聯(lián)合創(chuàng)始人如是說。

02. O Music Awards

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

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

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

03. SquareSpace

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

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

CSS變換和動畫被用來加強(qiáng)設(shè)計和交互， 漂亮的Hoefler & Frere-Jones字體被用來吸引人們的注意，Cachia說這個網(wǎng)站集"干凈的頁面、字體、圖標(biāo)以及引人注目的圖片等細(xì)節(jié)之美于一體。"

04. Rent.com

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

在聽了Scott Jehl關(guān)于RWD的講話之后（Filament Group），公司決定對網(wǎng)站進(jìn)行重新設(shè)計。更新版是一個非常易于使用的響應(yīng)式網(wǎng)站。

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

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

05. MoreSleep

MoreSleep，一個 Berlin創(chuàng)意代理商，網(wǎng)站像血管一樣。

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

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

06. Thankful Registry

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

"我們制作了一個響應(yīng)式系統(tǒng)，你可以滑下整個頁面來顯示主要導(dǎo)航選項，這種設(shè)計讓我們能夠?qū)⒛抗饧性诿利惖膱D片中，同時也給了用戶獨(dú)一無二的響應(yīng)式體驗。" Schram如是說。

07. The Brackets

United Pixelworkers和Dribbble聯(lián)手制作了The Brackets，第一年度NCAA錦標(biāo)賽向所有網(wǎng)民和設(shè)計社區(qū)開放。這個網(wǎng)站美麗簡單，即使你不喜歡籃球也值得參觀一下。

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

08. Windows of New York

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

09. Life in my Shoes

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

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

10. Solo

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

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

11. Form Follows Function

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

12. Branch

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

13. The Gently Mad

大副標(biāo)題和章節(jié)列表很好的傳達(dá)了個人設(shè)計理念The Gently Mad是一個關(guān)于網(wǎng)頁開發(fā)者的播客。創(chuàng)始人Adam Clark使用了CSS3轉(zhuǎn)換工具和逐漸褪色功能，他告訴我們，"我覺得我的每一個設(shè)計單獨(dú)看效果會更好。"

14. Amazee Labs

CSS精美樣例使用現(xiàn)代Drupal框架，Amazee Labs可以為你的品牌制作新鮮的網(wǎng)站或社區(qū)，因為制作技術(shù)非常高超，他們的網(wǎng)站被視為CSS教學(xué)模版。他們已經(jīng)為很多領(lǐng)域的公司制作過網(wǎng)站，都得到了非常好的反響。

15. A&W

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

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

翻譯小組：優(yōu)設(shè)網(wǎng)SDC翻茄匠 微博ID: @豆池麥
原文地址：creativebloq

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，轉(zhuǎn)摘請注明優(yōu)設(shè)網(wǎng)譯文出處，謝謝各位小編。

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