iT邦幫忙

DAY 29
10

CSS沒有極限系列 第 25

CSS沒有極限 - CSS 的相關資料

今天沒有要介紹任何效果,是要介紹這些CSS資料是從何處獲得的~

前端社群
台灣的前端社群也是高手雲集的地方,如果想要知道最新的技術資訊,從社群進入是最快的方式,這邊就簡單介紹幾個與CSS有關的Facebook社群。

HTML5 與 CSS3 :https://www.facebook.com/groups/htmlfive/
Front-End Developers Taiwan :https://www.facebook.com/groups/521085554595481/
RGBA :https://www.facebook.com/groups/rgba.tw/
RGBA 資源 :https://www.facebook.com/rgba.tw?fref=ts
高雄前端社群 :https://www.facebook.com/groups/358503154261390/

靈感來源
在不清楚CSS可以做些什麼之前,我們可以先四處蒐集靈感,有好的範例後,我們可以從中拆解學習其CSS的效果組成原理,並且轉化成日後專案的利器。

Codepen :http://codepen.io/
Codrops :http://tympanus.net/codrops/
Codepen
這網站上有很多高手實驗性的作品,本站的很多效果也是參考其中實驗性的作品。

Codrops
這邊會蒐集許多細膩的前端效果,許多不只創新,還相當的有質感。

前端字典
找到了效果後,在拆解的過程中如果有不了解的問題,一定要追根究柢,所以字典是非常重要的,當然這邊也是介紹和CSS有關的字典。

Devdocs : http://devdocs.io/
Overapi :http://overapi.com/css/
Devdocs
這是我主要查詢程式碼的網站,內容詳盡,且有標示相關來源,值得推薦。

Overapi
主要是清單列表相當清楚,配合ctrl+f很快可以找到要的屬性。

優秀的設計網站
除了實驗性的效果,我們也可以看看大家是怎們把效果實作在產品上。以下都是相當棒的網站,就不一一介紹了,而Media Queries和其他比較起來是較中規中矩,但每一個網站都符合各裝置,且品質都相當具有指標性。

Flatdsgn : http://flatdsgn.com/
CSS Winner : http://www.csswinner.com/
CSS Design awards : http://www.cssdesignawards.com/
Awwwards : http://www.awwwards.com/
Media Queries : http://mediaqueri.es/

Flatdsgn

CSS Winner

CSS Design awards

Awwwards

Media Queries

網路上的資源絕對不止這些,但以上所挑選的網站都是會不斷地更新資料,如果有興趣的朋友可以不定期的看這些網站。


上一篇
CSS沒有極限 - CSS only responsive navigation
下一篇
CSS沒有極限 - 鐵人賽不是開始,也不是結束
系列文
CSS沒有極限41

2 則留言

0
Ho.Chun
iT邦新手 5 級 ‧ 2019-02-26 10:34:04

Overapi 這樣敲URL會找不到東西
http://overapi.com/css/
少一個斜線就OK
http://overapi.com/css

感謝大大提供資源 /images/emoticon/emoticon41.gif
前端的世界無奇不有!!!

我要留言

立即登入留言