工程師不造輪胎 一個好的開始 就是直接站在巨人的肩膀上 這樣最快 最輕鬆 最開心!!!
所以這篇文章主要是彙整一些 優質 好用 而且免費的前端資源 感謝網路上巨人們的貢獻!!!
p.s. 很多資源可以免費使用在商業上 但需不需要 credit 作者 記得還是先看一下 license
內文
- 圖片
- 模板
- 字型
- API
- CSS Animation
圖片
Unsplash
以前這個網站所有提供的圖片都是 CC0
真正的免費 可以完全任意的使用 無需標明出處來源 是一個非常受到歡迎的圖庫
現在呢 許可改為 Unsplash 自己的許可 多了一些限制
- 不能以 Unsplash 的圖片和 Unsplash 競爭
- 圖片在未經過大幅度修改下不能直接進行販售
但依然是可以進行商業或非商業使用 也無需標明出處來源
重點是品質都有相當高得水準 直接拿個一張圖片放在網頁上當 banner
你的網頁就直接昇華到了下一個檔次
缺點是因為免費高品質 容易有撞衫的機會
模板
TEMPLATED
裡面超過 800 種版型 每種版型都包含了完整的 HTML, CSS 甚至是 RWD
可以做為商業與個人使用 主要的許可是 CC-by 簡單來說只要在網站上著名出處就可以了
如在 footer 上寫 Designed by <出處>
細部點進去看 還會發現有一些其實是 CC0 !!! 超級棒 !!!
字型
Google Fonts
字型推薦 Google Fonts
主要的許可是 Open Font License
可以自由地使用在產品 專案 及商業上 限制是不能直接去賣這個字型
字型的使用上非常的便利
可以用 CDN 或是下載
通常在網頁加上字型的話 可以大幅度的提升網頁的質感
p.s. 如果網站地區是在大陸的話 要注意 CDN 可能會連不到 建議直接下載
API
public-apis
在 github 上有厲害的人們 彙整了相當多的 API
詳細可以直接閱讀 README 的部分
上面註明了是否需要授權以及可不可以跨域使用 etc.
另外 API 的種類還有分門別類 非常的用心
如果前端應用需要一些動態資源 很適合來這邊尋找靈感
CSS Animation
animate.style
Animated.css 一個老牌的動畫 Library
不知道這個網站什麼時候改版了
一開始進去還有點認不出來
但看到熟悉的動畫效果馬上就認出來了
裡面提供非常多好用的 CSS Animation
許可為 MIT License
以前只能使用 CDN 現在也提供了 npm 的使用方法
這個庫可以非常方便的在網頁上套用現成好看的動畫效果
本文作者： David Huang
本文地址： https://davidblog.github.io/2020/06/27/free-sources/