前端必備的實用工具，都在這裏了

配合個人另外一篇難以想象的CSS技巧大全一塊兒食用效果更佳哦~

UI

圖標

• font-awesome
• iconfont

配色

• flatuicolors
• coolors.co
• color-hunt
• materialpalette
• style-guide
• Flattastic Pro Color Palette

字體

• google font

CSS

佈局

• flexbox-playgorund：flex的可視化教程
• css grid generator：grid網格生成器
• flexbox.malven.co：可拷貝的flex樣式
• grid.malven.co：可拷貝的grid樣式

動畫

• cubic-bezier：貝塞爾曲線可視化
• easings：緩動函數速查表
• keyframes.app：動畫關鍵幀編輯器
• perspective playground：3D變換可視化
• animista：動畫可視化
• motion table：動效元素週期表

圖形

• clippy：自動生成clip-path圖形
• fancy-border-radius：自動生成border-radius圖形
• css-triangle-generator：自動生成三角形

漸變

• webgradients：漸變色集合
• uigradients：漸變色集合
• gradientmagic：漸變色集合
• shapy：自動生成漸變色
• 5-way-gradient-generator：自動生成漸變色

svg

• svg-filters：svg 濾鏡
• svg-gradient-map：給圖片加上 svg 漸變濾鏡
• url-encoder：將 svg 編碼成 url

現成

• csswand.dev
• cssfx.dev
• epic-spinners
• spinkit

技巧

• css tricks
• css inspiration
• 30 seconds of css
• You-need-to-know-css
• You-Dont-Need-JavaScript
• youmightnotneedjs
• 66-CSS-tricks

其餘

• devdocs：在線 API 文檔，必備不解釋
• caniuse：兼容性參考
• selectors-cheetsheet：選擇器速查表
• unit-converter：單位轉換器
• specificity：優先級計算器
• contrast-ratio：背景文字對比度測試