前言
這兩年收藏了不少網站,特地整理一下,把一些大家都可能用得上的分享出來,希望能對你有用。
考慮到有一些網站大多數人都知道,所以我就不列出來了。
我把這些網站分為了幾大類:
- 工具類
- 素材類
- 社群類
工具類
1、start.me (收藏工具)

它不僅僅是一個網址收藏管理器,它還可以:推送、嵌入任何東西、整合、自定義、分享你的收藏夾、瀏覽器擴充套件。
很明顯本文所分享的網站就是靠它來儲存的,用它的理由兩個就夠了:
- 可以在不同裝置中共享書籤。
- 域名好記。
網站連結:start.me
2、Placemat(快速生成佔點陣圖片器)

如果你是前端,就有可能會遇到需要佔點陣圖來填充網頁的情況,而 Placemat 就是用來生成佔點陣圖的。
最基本的用法是:給定引數w
或h
,Placemat 會隨機返回相應尺寸的圖片,其他用法自行探究。
使用 Placemat 的好處顯而易見。
網站連結:placem.at
3、Carbon(程式碼界美圖秀秀)

這個無需多言,明眼人一看就知道是用來裝什麼的 :)
網站連結:carbon.now.sh
4、TinyPNG(線上壓縮圖片)

圖片壓縮界的一哥了,支援同時上傳多張圖片。很好用,壓縮率也很高,最重要的是,速度很快。
網站連結:tinypng.com
5、兩個線上截圖工具

BrowserFrame 是一個生成瀏覽器外殼的網站,它提供了兩種方式來生成截圖,分別是:
- 上傳本地截圖
- 輸入網址生成截圖(可能掛了,經常不成功)
注: 推薦另一個功能類似的網站 Screen Guru,它可以實現通過網址生成截圖功能,看下圖。

這樣截圖逼格瞬間提升百倍有木有 :)
網站連結1:browserframe.com
網站連結2:screen.guru
6、ColorSpark(線上隨機顏色)

隨機生成好看的顏色、漸變色,可以一鍵複製 CSS 程式碼。
網站連結:colorspark.app
7、FontSpark(線上預覽字型)

隨機字型線上預覽,用過都說好。
網站連結:fontspark.app
8、easy PDF(線上 PDF 工具)

功能看上圖。
網站連結:easypdf.com/cn
素材類
1、覓元素(免摳素材)

在國內算是相對良心的網站了,一天有5次免費下載機會,上面素材質量很高,簡直是做 PPT 必備。
網站連結:www.51yuansu.com
2、高清無版權圖片網站
這裡只列出國內訪問速度還算可以的,但是不一一貼圖了,有興趣可以自行檢視。
3、UI設計師導航
想看更多的可以去這幾個導航看看。
社群類
1、CSS-TRICKS

一個國外的優秀前端開發部落格,主要分享使用 CSS 樣式的技巧,經驗和教程等。值得前端開發者閱讀收藏的國外網站。
網站連結:css-tricks.com
2、踏得網

算是國內版的 CodePen,其中不乏一些驚豔的動畫、特效。
3、免費資源網路社群

免費資源網路社群是一個以免費為主題的臺灣網站、部落格,內容包含科技新知、免費軟體、線上工具、相簿素材、WordPress 架站及應用程式介紹教學。
我不會告訴你上面大多數網站都是從這裡看到的。
網站連結:free.com.tw
4、前端裡

前端裡專注於分享最前沿的Web開發技術,教程,資源和素材,是面向網站開發人員和設計師的學習交流平臺。
網站連結:www.yyyweb.com
5、伯樂線上

伯樂線上資源收錄各種開發、設計、系統管理與安全相關的工具與資源。
網站連結:hao.jobbole.com
後記
擁有自己的工具箱可以有效地提高你的工作效率,從而有更多的時間投入到真正開發之中。
最後,厚著臉皮發出我的簡歷,連結。