編者按：坊間傳聞，有本CSS的高手煉成秘籍在江湖失傳已久，書(shū)中所載，多為最新的驚人技術(shù)與實(shí)例示范，是為集大成者，一旦學(xué)成，代碼效率猛增，功力提升數(shù)倍，今日偶獲，不敢怠慢，趕緊發(fā)到優(yōu)設(shè)，望人人受益。說(shuō)人話：好東西呀快來(lái)看呀！

在本列表中，。我們從多位藝術(shù)家那里搜集了驚人的例子，足以證明使用CSS，一切皆有可能。我們還收集了一些關(guān)于CSS 3的不可思議新功能的文章，以及一些有用的CSS庫(kù)。接下來(lái)的內(nèi)容會(huì)讓你目不轉(zhuǎn)睛，所以讓我們開(kāi)始吧！

不可思議的CSS 3新功能：Tutorialzine.com

為了充分感受這些例子你需要最新的瀏覽器，比如Chrome。

1.?模糊菜單

這是一個(gè)非常漂亮的僅使用CSS的菜單。實(shí)際上它有7個(gè)示例！它們都是用了新的CSS 3 transition功能，另外還巧妙地使用選擇器創(chuàng)建圓滑的模糊效果。你可以在?http://tympanus.net?閱讀代碼以了解更多。

2.?CSS 3D云

在這個(gè)示例應(yīng)用里，你可以搞出一些逼真的云彩。它的存在提示你網(wǎng)頁(yè)設(shè)計(jì)可以提供的無(wú)限可能。示例代碼略微有些復(fù)雜，不僅使用了CSS3 3D 變形，還使用了JavaScript。這里是對(duì)象的高級(jí)教程：www.clicktorelease.com

3.?純CSS LOGO

有一些知名公司的logo是完全由CSS寫(xiě)成的。這個(gè)例子的帥氣之處是你可以把鼠標(biāo)懸停在上面去查看究竟是哪個(gè)CSS屬性構(gòu)成了這個(gè)圖像，你也可以在?github?上查看完整的代碼。

4.?CSS A/Z

自備梯子。

這是另外一個(gè)藝術(shù)化的CSS。在這些縮略圖海報(bào)，字母被描繪成美好的動(dòng)畫(huà)，涌出生命。

5.?Jan Kaděra的導(dǎo)航條

簡(jiǎn)單但非常時(shí)尚的導(dǎo)航。它的CSS代碼只有65行，但是你看，它看上去給人感覺(jué)太神奇了。新的CSS 3功能變換和過(guò)渡都用于創(chuàng)建景深效果。

6.?CSS的Google Doodle

這是一個(gè)小Google Doodle動(dòng)畫(huà)的CSS版本。這個(gè)作品非常好，非常流暢而且沒(méi)有JavaScript！

7.?幻燈片圖像面板

另外一個(gè)制作精良的項(xiàng)目，這次是幻燈片面板。如絲般順滑，絕不添加JS，所有細(xì)節(jié)都精確到每一像素。示例包含4種變種和一個(gè)教程：tympanus.net。別忘了都看看！

8.?雙環(huán)

一個(gè)美麗的動(dòng)畫(huà)環(huán)，在唯一一個(gè)div元素中，并使用了數(shù)百行純CSS。

9.?模糊濾鏡

使用CSS 3新特性的另一個(gè)示范，過(guò)渡、濾鏡、3D變形和所有好東西。演示本身沒(méi)什么花哨的，但是想像一下在添加了一些美麗圖層之后，會(huì)有如何奇妙的效果！

現(xiàn)在讓我們來(lái)看一下關(guān)于CSS 3新特性的文章和教程。

10.?Flexbox的完整指南

這是一個(gè)深入介紹“flex”容器或以此為名的flexbox的文章。Flexbox是CSS中新近引入的頁(yè)面布局方式。它是一種令元素寬高及對(duì)齊方式都自動(dòng)適應(yīng)空間的布局方式。

另外，如果要快速瀏覽的話，你可以使用這個(gè)表格：www.sketchingwithcss.coml。

11.?彩色CSS3動(dòng)畫(huà)導(dǎo)航

在我們?cè)缙诘慕坛讨?，我們向你展示了如何?chuàng)建一個(gè)使用動(dòng)畫(huà)下拉菜單的多彩導(dǎo)航菜單。沒(méi)有使用特殊的圖像和JavaScript，完全由CSS組成。

12.?了解CSS濾鏡效果

如果你對(duì)CSS新提供的濾鏡，我們推薦你讀一下這篇教程。它列舉了一些很好的例子，另外還有很多關(guān)于瀏覽器支持及性能問(wèn)題的信息。

13.?CSS形狀101

這是我看過(guò)的關(guān)于CSS的最好的文章。它提出了CSS3形狀的概念，并展示了大量有用的例子。干的太好了！

14.?風(fēng)格化CSS3進(jìn)度條

在這個(gè)教程里，作者闡述了如何不使用復(fù)雜的腳本創(chuàng)建一個(gè)簡(jiǎn)單的進(jìn)度條。他們使用各種CSS 3技術(shù)來(lái)給進(jìn)度條添加漸變、條紋、光澤和發(fā)光效果。最終效果看起來(lái)非常不錯(cuò)而且易于應(yīng)用，演示戳：red-team-design.com

最后，但不代表不重要的CSS庫(kù)，最近也開(kāi)始顯山露水。

15.?Animate.css

它能在?github.com?上非常受歡迎是有原因的！它完全基于CSS因此可以提高任何應(yīng)用的性能。

我們還推薦這篇?離開(kāi)jQuery寫(xiě)JavaScript的10條小建議！

16.?Spinkit

Spinkit是一系列易于定制的加載指示器，滿足日常需求。

17.?Buttons

就是如同它標(biāo)題所說(shuō)，沒(méi)別的，就是一系列按鈕。

18.?On/Off FlipSwitch

一個(gè)超贊的小工具，供你定制不同狀態(tài)的按鈕，并直接導(dǎo)出CSS。另外還有切換主流操作系統(tǒng)風(fēng)格的功能A。

19.?Hint.css

不需要任何JavaScript的CSS庫(kù)，用于提示標(biāo)簽。

20.?Colors.css

Colors.css是為那些痛恨十六進(jìn)制代碼的人準(zhǔn)備的。它提供了一系列不錯(cuò)的顏色選擇。

結(jié)論

這就是我們列表的結(jié)束。我們希望這些工具對(duì)你有所幫助，并能為你探索CSS設(shè)計(jì)的無(wú)限可能提供新的思路！

那些年流傳在江湖的3篇神文推薦！

細(xì)節(jié)！細(xì)節(jié)！還是細(xì)節(jié)！
《高手支招！怎樣分辨圖片是否被PS過(guò)》

PS四大神技，你絕對(duì)沒(méi)見(jiàn)過(guò)！
《PS神技Get√ 你百分百不知道的四大PS技巧》

現(xiàn)在就感受一下未來(lái)的網(wǎng)站！
《體驗(yàn)未來(lái)：10個(gè)會(huì)讓你驚嘆不已的HTML5畫(huà)布技術(shù)應(yīng)用演示》

原文地址：tutorialzine
優(yōu)設(shè)網(wǎng)譯者：@阿布
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量78萬(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ò)掃描下方二維碼快速添加：