Day-29 常用網站工具分享

自己從頭到尾用 HTML 寫一個表格，或者從 0 開始使用 CSS 寫一個陰影效果，都是快把人逼死的過程啊，除非是真的打算刻苦一鍵一鍵敲程式碼，慢慢地練習，不然在上班時，趕專案時心特別累...今天就跟大家分享一些拿來偷吃步的好工具，多多利用它們，幫助自己準時下班囉。

HTML + CSS

Tailwind CSS Cheat Sheet

查找 tailwindCSS class name 的神器，找到之後還有直連官網，超讚的啦。

Make a smooth shadow

製作順滑 box shadow 比想像中常用，設計稿上看到不會寫的影子，可以參考。

HTML Table Generator

表格產生器，超好用。甚至可以直接從 word 或者 excel 複製表格貼上，連 css 都能產生呢。

HTML Div Table Generator

這個是 div 版本的表格產生器，依照需求的情境不同，可以做不同的安排。

CSS 3 Generator

很多種類的 css 產生器。

JSX

HTML to JSX

我自己工作的其中一種流程是這樣 :設計稿是設計師給的，我拿到設計稿之後用純 HTML + CSS 完成之後，傳檔案給設計師做第一次的確認，確認完畢之後，當我要把切版檔案放進 react 時，就會需要它來幫我轉一下，曾經有試過 vs code 套件的轉換，用起來沒那麼順，還是習慣這個。

設計工具

Blend

Gradient Background

漸層的輔助製作工具，很漂亮也很好用，試試看吧！

Avatar Generator

有趣的可愛頭像產生器。

Color Tool

沒有設計師的時候，能幫自己產生參考的主色與輔色的顏色工具。

結語

我不是很擅長設計，所以會跟這些網站借一點力量來用，最後還是要依靠自己的判斷來決定是不是要使用這些樣式，並不會完全照抄。