想想後來的網頁比較少有背景圖需求,多半都是以單色為主,如果覺得略顯單調,也能使用紋理材質或漸層色做為背景,例如 Paper-co 就有許多日系的紙張紋理材質可用做背景,不僅看起來可以提升質感,也不會影響閱讀造成負擔,另一個之前推薦過的 Subtle Patterns 也有超過 500 種紋理素材可供下載;若喜歡重複背景圖 Hero Patterns 可以在不下載任何檔案情況下產生好看的平鋪式背景圖,或是使用 ColorSpark、Gradient Backgrounds 製作漸層色背景,需要背景圖的朋友可以試試看這些服務。
CSS產生器
Snapfont 在網頁即時套用測試 Google Fonts 和本機字型顯示效果(Chrome 擴充功能)
對中文網頁來說,CSS 字型設定一直是個麻煩的問題,想直接載入字型檔案容量太大,拖慢網頁速度、耗費過多流量,通常會使用網頁字型解決,像是 Google Fonts 和 Adobe Fonts(以前叫作 Typekit)就有提供思源黑體和思源宋體等中文網頁字型,只要加入一段 JavaScript 程式碼並調整一下 CSS 樣式表就能使用,讓網頁的中文部分更易於閱讀,設計看起來也更有質感。
CSSFX 最美的 CSS 動態效果一鍵複製,提升使用者操作體驗
前陣子介紹過「CSSeffectsSnippets 收錄 CSS 動態效果,線上預覽一鍵複製程式碼」這個很有趣的網站,事實上現今 CSS 樣式表可以做的事越來越多,甚至透過幾段原始碼達到動態效果,看起來不僅互動性高,還能提升使用者體驗,完全不用額外載入其他的 JavaScript 程式庫,只不過這些原始碼不一定每個人都會寫,利用 CSSeffectsSnippets 網站直接線上預覽,找到需要的動態效果後就會給出相關 CSS 原始碼(和早期在學習做網頁很像)。
CSSeffectsSnippets 收錄 CSS 動態效果,線上預覽一鍵複製程式碼
Tables Generator 線上製作產生表格 HTML、LaTeX、Markdown 原始碼
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 種顏色,這是找尋日本傳統色系配色的絕佳網站。