前陣子介紹過「CSSeffectsSnippets 收錄 CSS 動態效果，線上預覽一鍵複製程式碼」這個很有趣的網站，事實上現今 CSS 樣式表可以做的事越來越多，甚至透過幾段原始碼達到動態效果，看起來不僅互動性高，還能提升使用者體驗，完全不用額外載入其他的 JavaScript 程式庫，只不過這些原始碼不一定每個人都會寫，利用 CSSeffectsSnippets 網站直接線上預覽，找到需要的動態效果後就會給出相關 CSS 原始碼（和早期在學習做網頁很像）。
CSS產生器
CSSeffectsSnippets 收錄 CSS 動態效果，線上預覽一鍵複製程式碼
網頁設計師或網站開發者一定對 CSS 不陌生，CSS 中文是階層式樣式表，通常會簡稱為樣式表，主要是用來控制網頁中看到的各種樣式，例如文字大小、間距、背景色、頁面布局或各種元素呈現的方式。隨著現今大部分瀏覽器都已經支援 CSS3，在 CSS3 也加入許多新的功能，其中也支援動畫和立體效果，這都讓網頁能有更多更不同的變化，也不需要再使用舊方法，讓效果在編寫及管理上更輕鬆。
Tables Generator 線上製作產生表格 HTML、LaTeX、Markdown 原始碼
如果有接觸過網頁設計或曾經嘗試在網站、部落格放入表格，應該會覺得表格（Tables）是一個非常難搞的東西，不但原始碼複雜，沒有所見即所得編輯器似乎也很難直接寫出來，而在瀏覽器上使用的網頁編輯器又很難修改表格內容，有時候從其他文書處理工具直接複製貼上就會自帶很多用不到的程式碼，程式碼看起來很髒又無法符合當前的頁面風格，總之表格一直是很多人的痛，我也很少在網頁中用到表格，不過表格還是呈現一些數據相當好的方式。
Blend 網頁漸層背景產生器，選擇顏色即時預覽建立 CSS 原始碼
現在很常在網路服務或網站上看到漸層背景應用，記得早期都必須使用圖片堆疊出來，不過後來已經可以寫入 CSS 樣式，只要指定顏色代碼和呈現方式即可。雖然知道有這功能，但要立即寫出來好像也不是那麼容易，還好有網站可以參考，例如 Gradient Backgrounds 收錄各種漸層背景產生器的一站式工具，簡單一點還有 ColorSpark、CoolHue 這類漸層色組合產生器，可快速建立 CSS3 語法，複製到網站就能套用。
Gradient Backgrounds 一站式漸層背景產生器，收錄各種服務方便切換
大家都知道現在漸層背景可直接使用 CSS 3 寫出來，終於不用辛苦製作背景圖，好處是一段程式碼就能解決，但你可能不一定知道怎麼寫，還好網路上已經有不少背景產生器，透過可視化介面調整效果後快速轉為程式碼，非常方便！例如 WebGradients、CoolHue 或 ColorSpark 都很好用，如果你需要更複雜一點的背景圖案，Caself 和 Subtle Patterns 也很適合。
ColorSpark 隨機產生顏色或漸層色組合，顯示 CSS3 代碼快速複製
每次要選擇顏色的時候，我總是會從眾多配色工具找一兩個自己喜歡的，無論從中尋找靈感或挑選合適的顏色都很好用，例如：Coolors 快速選色器，後來改版後介面稍微有變得複雜一些；另外還有 Colordot 更人性化的選色工具服務，在移動滑鼠搖標時輕鬆找出配色靈感；我也喜歡 NIPPON COLORS 代表日本的 250 種顏色，這是找尋日本傳統色系配色的絕佳網站。
SVG Backgrounds 免費網站背景圖下載，可線上預覽、調整顏色細節
如果開發網站或網路服務，可能會需要用到背景圖，以往很多時候會使用 PNG 格式來當做背景，像是 Caself 提供 800 種免費紋理背景圖片就是透過 PNG 檔案來製造出的背景效果，不過現階段來說 SVG 會是更好的選擇，SVG 有什麼特色呢？它不但檔案容量更小、高解析度、可以自由縮放，而且也被主要瀏覽器支援，更重要的是具備可自訂性，不需繪圖軟體就能做到！
閱讀全文 » 關於 SVG Backgrounds 免費網站背景圖下載，可線上預覽、調整顏色細節
CoolHue 最酷的漸層色背景色卡產生器，快速產生背景 CSS3 語法
這幾年新出現的網路服務或應用程式都喜歡使用漸變色作為背景圖，有一些則會選用高畫質、高解析度免費圖庫相片，相較於單色背景來說，漸層色看起來更有活力，且目前技術只要透過 CSS3 語法就能將漸層運用到網頁中，不會拖慢網頁載入速度，語法撰寫方式也很簡單，幾乎可以說一段語法就能快速套用背景。
閱讀全文 » 關於 CoolHue 最酷的漸層色背景色卡產生器，快速產生背景 CSS3 語法