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

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

01. Envoy

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

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

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

02. O Music Awards

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

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

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

03. SquareSpace

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

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

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

04. Rent.com

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

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

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

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

05. MoreSleep

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

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

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

06. Thankful Registry

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

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

07. The Brackets

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

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

08. Windows of New York

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

09. Life in my Shoes

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

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

10. Solo

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

這個(gè)網(wǎng)站展示產(chǎn)品頁(yè)面全部都是由CSS3制作的，"一開(kāi)始我決定用HTML5和CSS3，并且只提供現(xiàn)代瀏覽器版本，因?yàn)樵谇捌谡{(diào)查中我們發(fā)現(xiàn)，只有百分之三的用戶使用IE訪問(wèn)主頁(yè)。因?yàn)槲覀兊哪繕?biāo)市場(chǎng)不在IE，所以沒(méi)必要支持它。"APP設(shè)計(jì)者Jerome Iveson如是說(shuō)。

11. Form Follows Function

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

12. Branch

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

13. The Gently Mad

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

14. Amazee Labs

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

15. A&W

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

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

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

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

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