前言
網頁開發時常需要各種工具來輔助設計與開發, 這篇文章整理了我常用的線上工具, 涵蓋 HTML、CSS、圖片處理等面向.
HTML 工具
Editorx
- Editorx
- 可以直接參考上面的設計樣式, 或直接在上自行設計之後再刻畫面
- 可以配合 RWD 設計不同版面
CSS 工具
Caniuse
- Caniuse
- 查詢各種 CSS 屬性, 那些瀏覽器版本支援
Coolors
- Coolors
- 可以在上面直接找顏色列表
- 可以比較顏色對比度
Zhangxinxu
- Zhangxinxu
- 顏色轉換成 CSS filter
Uiverse
- Uiverse
- 可以找到各種 CSS 動畫效果
圖片工具
SVG 圖示
圖片壓縮
- Squoosh: 可以壓縮圖片
製圖工具
Excalidraw
- Excalidraw
- 可以畫示意圖
Tinysnap
- Tinysnap
- 用來美化截圖, 可以用在 Chrome 插件