文章源自:20 Impressive CSS3 Techniques, Libraries and Examples
譯者:阿布
在本列表中确憨,我們從多位藝術(shù)家那里搜集了驚人的例子氧猬,足以證明使用CSS怀伦,一切皆有可能。我們還收集了一些關(guān)于CSS 3的不可思議新功能的文章凡恍,以及一些有用的CSS庫志秃。接下來的內(nèi)容會讓你目不轉(zhuǎn)睛,所以讓我們開始吧嚼酝!
不可思議的CSS 3新功能:Tutorialzine.com
為了充分感受這些例子你需要最新的瀏覽器浮还,比如Chrome。
1.模糊菜單
這是一個非常漂亮的僅使用CSS的菜單闽巩。實際上它有7個示例钧舌!它們都是用了新的CSS 3 transition功能,另外還巧妙地使用選擇器創(chuàng)建圓滑的模糊效果涎跨。你可以在http://tympanus.net閱讀代碼以了解更多洼冻。
2.CSS 3D云
在這個示例應(yīng)用里,你可以搞出一些逼真的云彩隅很。它的存在提示你網(wǎng)頁設(shè)計可以提供的無限可能碘赖。示例代碼略微有些復(fù)雜,不僅使用了CSS3 3D 變形外构,還使用了JavaScript。這里是對象的高級教程:www.clicktorelease.com
3.純CSS LOGO
有一些知名公司的logo是完全由CSS寫成的播掷。這個例子的帥氣之處是你可以把鼠標(biāo)懸停在上面去查看究竟是哪個CSS屬性構(gòu)成了這個圖像审编,你也可以在github上查看完整的代碼。
4.CSS A/Z
自備梯子歧匈。
這是另外一個藝術(shù)化的CSS垒酬。在這些縮略圖海報,字母被描繪成美好的動畫件炉,涌出生命勘究。
5.Jan Kaděra的導(dǎo)航條
簡單但非常時尚的導(dǎo)航。它的CSS代碼只有65行斟冕,但是你看口糕,它看上去給人感覺太神奇了。新的CSS3功能變換和過渡都用于創(chuàng)建景深效果磕蛇。
6.CSS的Google Doodle
這是一個小Google Doodle動畫的CSS版本景描。這個作品非常好十办,非常流暢而且沒有JavaScript!
7.幻燈片圖像面板
另外一個制作精良的項目超棺,這次是幻燈片面板向族。如絲般順滑,絕不添加JS棠绘,所有細(xì)節(jié)都精確到每一像素件相。示例包含4種變種和一個教程:tympanus.net。別忘了都看看氧苍!
8.雙環(huán)
一個美麗的動畫環(huán)夜矗,在唯一一個div元素中,并使用了數(shù)百行純CSS候引。
9.模糊濾鏡
使用CSS 3新特性的另一個示范侯养,過渡、濾鏡澄干、3D變形和所有好東西逛揩。演示本身沒什么花哨的,但是想像一下在添加了一些美麗圖層之后麸俘,會有如何奇妙的效果辩稽!
現(xiàn)在讓我們來看一下關(guān)于CSS 3新特性的文章和教程。
10.Flexbox的完整指南
這是一個深入介紹“flex”容器或以此為名的flexbox的文章从媚。Flexbox是CSS中新近引入的頁面布局方式逞泄。它是一種令元素寬高及對齊方式都自動適應(yīng)空間的布局方式。
另外拜效,如果要快速瀏覽的話喷众,你可以使用這個表格:www.sketchingwithcss.com。
11.彩色CSS3動畫導(dǎo)航
在我們早期的教程中紧憾,我們向你展示了如何創(chuàng)建一個使用動畫下拉菜單的多彩導(dǎo)航菜單到千。沒有使用特殊的圖像和JavaScript,完全由CSS組成赴穗。
12.了解CSS濾鏡效果
如果你對CSS新提供的濾鏡憔四,我們推薦你讀一下這篇教程。它列舉了一些很好的例子般眉,另外還有很多關(guān)于瀏覽器支持及性能問題的信息了赵。
13.CSS形狀101
這是我看過的關(guān)于CSS的最好的文章。它提出了CSS3形狀的概念甸赃,并展示了大量有用的例子柿汛。干的太好了!
14.風(fēng)格化CSS3進(jìn)度條
在這個教程里辑奈,作者闡述了如何不使用復(fù)雜的腳本創(chuàng)建一個簡單的進(jìn)度條苛茂。他們使用各種CSS 3技術(shù)來給進(jìn)度條添加漸變已烤、條紋、光澤和發(fā)光效果妓羊。最終效果看起來非常不錯而且易于應(yīng)用胯究,演示戳:red-team-design.com
最后,但不代表不重要的CSS庫躁绸,最近也開始顯山露水裕循。
15.Animate.css
它能在 github.com 上非常受歡迎是有原因的!它完全基于CSS因此可以提高任何應(yīng)用的性能净刮。
我們還推薦這篇離開jQuery寫JavaScript的10條小建議剥哑!
16.Spinkit
Spinkit是一系列易于定制的加載指示器,滿足日常需求淹父。
17.Buttons
就是如同它標(biāo)題所說株婴,沒別的,就是一系列按鈕暑认。
18.On/Off FlipSwitch
一個超贊的小工具困介,供你定制不同狀態(tài)的按鈕,并直接導(dǎo)出CSS蘸际。另外還有切換主流操作系統(tǒng)風(fēng)格的功能A座哩。
19.Hint.css
不需要任何JavaScript的CSS庫,用于提示標(biāo)簽粮彤。
20.Colors.css
Colors.css是為那些痛恨十六進(jìn)制代碼的人準(zhǔn)備的根穷。它提供了一系列不錯的顏色選擇。