CSSFX 最美的 CSS 動態效果一鍵複製,提升使用者操作體驗

CSSFX 最美的 CSS 動態效果一鍵複製,提升使用者操作體驗

前陣子介紹過「CSSeffectsSnippets 收錄 CSS 動態效果,線上預覽一鍵複製程式碼」這個很有趣的網站,事實上現今 CSS 樣式表可以做的事越來越多,甚至透過幾段原始碼達到動態效果,看起來不僅互動性高,還能提升使用者體驗,完全不用額外載入其他的 JavaScript 程式庫,只不過這些原始碼不一定每個人都會寫,利用 CSSeffectsSnippets 網站直接線上預覽,找到需要的動態效果後就會給出相關 CSS 原始碼(和早期在學習做網頁很像)。

CSSeffectsSnippets 收錄 CSS 動態效果,線上預覽一鍵複製程式碼

CSSeffectsSnippets 收錄 CSS 動態效果,線上預覽一鍵複製程式碼

網頁設計師或網站開發者一定對 CSS 不陌生,CSS 中文是階層式樣式表,通常會簡稱為樣式表,主要是用來控制網頁中看到的各種樣式,例如文字大小、間距、背景色、頁面布局或各種元素呈現的方式。隨著現今大部分瀏覽器都已經支援 CSS3,在 CSS3 也加入許多新的功能,其中也支援動畫和立體效果,這都讓網頁能有更多更不同的變化,也不需要再使用舊方法,讓效果在編寫及管理上更輕鬆。

Blend 網頁漸層背景產生器,選擇顏色即時預覽建立 CSS 原始碼

Blend 網頁漸層背景產生器,選擇顏色即時預覽建立 CSS 原始碼

現在很常在網路服務或網站上看到漸層背景應用,記得早期都必須使用圖片堆疊出來,不過後來已經可以寫入 CSS 樣式,只要指定顏色代碼和呈現方式即可。雖然知道有這功能,但要立即寫出來好像也不是那麼容易,還好有網站可以參考,例如 Gradient Backgrounds 收錄各種漸層背景產生器的一站式工具,簡單一點還有 ColorSparkCoolHue 這類漸層色組合產生器,可快速建立 CSS3 語法,複製到網站就能套用。

Gradient Backgrounds 一站式漸層背景產生器,收錄各種服務方便切換

Gradient Backgrounds 一站式漸層背景產生器,收錄各種免費服務方便切換

大家都知道現在漸層背景可直接使用 CSS 3 寫出來,終於不用辛苦製作背景圖,好處是一段程式碼就能解決,但你可能不一定知道怎麼寫,還好網路上已經有不少背景產生器,透過可視化介面調整效果後快速轉為程式碼,非常方便!例如 WebGradientsCoolHue 或 ColorSpark 都很好用,如果你需要更複雜一點的背景圖案,CaselfSubtle Patterns 也很適合。

ColorSpark 隨機產生顏色或漸層色組合,顯示 CSS3 代碼快速複製

ColorSpark 隨機產生顏色或漸層色組合,顯示 CSS3 代碼快速複製

每次要選擇顏色的時候,我總是會從眾多配色工具找一兩個自己喜歡的,無論從中尋找靈感或挑選合適的顏色都很好用,例如:Coolors 快速選色器,後來改版後介面稍微有變得複雜一些;另外還有 Colordot 更人性化的選色工具服務,在移動滑鼠搖標時輕鬆找出配色靈感;我也喜歡 NIPPON COLORS 代表日本的 250 種顏色,這是找尋日本傳統色系配色的絕佳網站。

CoolHue 最酷的漸層色背景色卡產生器,快速產生背景 CSS3 語法

CoolHue 最酷的漸層色背景色卡產生器,快速產生背景 CSS3 語法

這幾年新出現的網路服務或應用程式都喜歡使用漸變色作為背景圖,有一些則會選用高畫質、高解析度免費圖庫相片,相較於單色背景來說,漸層色看起來更有活力,且目前技術只要透過 CSS3 語法就能將漸層運用到網頁中,不會拖慢網頁載入速度,語法撰寫方式也很簡單,幾乎可以說一段語法就能快速套用背景。

Gutenberg 開放原始碼網頁列印樣式下載,讓輸出網頁更正確美觀

Gutenberg 開放原始碼網頁列印樣式下載,讓輸出網頁更正確美觀

現今已經很少人會把網頁內容列印出來,PDF 表格表單大多能在線上處理,再加上家裡可能也不太放印表機,其實超商就能列印影印傳真,實在是沒有必要再添購一台機器放家裡佔空間。但對網頁設計者來說,有時候仍得兼顧到使用者列印內文的需求,但要怎麼樣才能讓列印出來的畫面符合使用者期待呢?至少列印時該出現的部分要出現,不該出現的廣告也盡量避免,顏色什麼的調整一下,其實可以透過 CSS 樣式來最佳化列印效果。

PrelaunchPage 快速建立產品上線前預告網頁,整合 Email 功能收集潛在用戶名單

PrelaunchPage 快速建立產品上線前預告網頁,整合 Email 功能收集潛在用戶名單
(Copyright: rawpixel / 123RF Stock Photo

如果喜歡嘗試各種新服務、新軟體,一定對產品介紹網頁不陌生,通常在對外開放前會有一段封閉測試期,除了為產品上線暖場外,也收集少數使用者的回饋建議來改進產品。因此建立一個好的準備頁面是很重要的。若你對於設計網頁不在行,初期也沒有太多預算來製作引人注目的產品頁面,本文要介紹的服務或許可以幫上忙。

WebGradients 收錄 180 種漸層背景免費下載,一鍵產生 CSS 3 語法

WebGradients 收錄 180 種漸層背景免費下載,CSS 3 樣式語法產生器

現在一些新的網路服務都蠻喜歡使用漸層顏色作為背景,一來讓背景不那麼單調,再者是 CSS3 之後加入 linear-gradient 參數表示漸變色背景圖,除了顏色外還能控制漸層的角度等等,幾乎只要幾個控制參數就能做到,在應用上更為靈活。如果你想要在網站開發或部落格使用漸層背景,之前我推薦的「Unique Gradient Generator 美麗的網頁毛玻璃模糊背景產生器」是一個方法,另外本文要介紹的 WebGradients 就更厲害一些。

Website Template Bar 收錄各大免費網站模板、佈景主題一頁瀏覽

Website Template Bar 收錄各大免費網站模板、佈景主題一頁瀏覽

還記得之前介紹過一個很實用的網站 The Stocks,將 16 個免費圖庫素材整理在同一網站裡更方便搜尋瀏覽(改版後收錄的內容又更多了),其實它的作法並不困難,而且在單一頁面裡快速切換不同圖庫設計也省下找書籤的麻煩。最近又發現一個類似服務 Website Template Bar,收錄主題以「免費網站模板」為主,一樣能在固定網站裡快速查找其他的網站模板網站,等於是將一個網站加入書籤,就能同時收藏這些網站,非常好用。