網頁藝術思考 - <strong class="xtra"><i lang="en">CSS</i> 網頁設計藝術</strong>

html 5 使用者輸入元素 (ui elements) 新屬性

css gradient 漸層設計冥想
說明： css level 3 (css 3) gradient 歷經數年數次的規則編修，終於有了底定的態勢，多家瀏覽器也在本文發表的當年有了更完整的支援，讓我們不需再完全只能依賴像素化圖形製作漸層。特別僅運用 CSS gradient 技術，設計出令人意想不到的圖案 (patterns) ，期望能激發更多的設計想像空間。
適合：想模仿範例自行製作者，須熟悉 html 及 css 語法，並有使用繪圖軟體漸層經驗。
難度：
更新：2013-12-19
支援：詳細可參考 Can I Use (至更新時，部分仍為廠商專屬擴充特性，須加上辨識詞)。

css 3D 動畫 (3D animation) ：立方體

javascript 輪播廣告範例三則
說明： jQuery Cycle 2 plugin 運用 html 5 的技術有了很大的轉變，與第一代 jquery cycle 的架構大不相同，提供設計者更多彈性，也就有了更多的設計發想空間。特別運用部分技術，設計富有更多想像的視覺輪動效果。範例也儘可能地符合 WAI 及台灣政府無障礙網頁的相關規範。 Cycle 2 plugin 使用方法可參考教學及基本解説。
適合：想模仿範例自行製作者，須熟悉 html, css, jQuery 及 javascript 語法。
難度：
更新：2013-5-1
支援：jQuery 1.7 以後。

css 3 動態視覺範例二組：
說明： css level 3 (css 3) 引領視覺設計進入了動畫層次，讓我們可以很容易製作出以往必須倚靠動畫程式才能完成的效果。特別僅運用 CSS 技術，設計出一連串令人意想不到的動態效果，期望能激發更多的設計想像空間。
適合：想模仿範例自行製作者，須熟悉 html 及 css 語法。
難度：
更新：2013-4-26
支援：依據個別範例内標註。

css transform 能旋轉、傾斜、縮放變形 box
說明：運用 css level 3 (css 3) 的 transform 特性 (css properties) ，直接就可以旋轉、歪斜、放大、縮小、移動元素 (elements) 的 box ，甚至 3D 的迴旋、透視。包括整個元素所有的內容也都隨之變形，不再侷限只能在僵硬的矩形框，對網頁排版及設計上會有很大的彈性和突破，而且對網頁正常的編排不會有相互排擠問題，一格黏接一格耗時費工的殘腦時代終將走入歷史。本篇僅先就 2D transform 的部分討論。
適合：有 html 及 css 語法基礎概念者。
難度：
更新：2013-03-11
支援：詳細可參考 Can I Use 。(至更新時，部分仍為廠商專屬擴充特性，須加上辨識詞)

css box-shadow 產生陰影效果或光暈效果的特性
說明：元素 (elements) 的 box 呈現陰影或光暈的效果。可指定陰影的位移距離、顏色、模糊程度、擴散程度，也支援內陰影，甚至多層次堆疊的陰影。運用這個 css level 3 (css 3) 的特性 (css property) ，讓我們可以很輕鬆就能呈現迷人的視覺效果，而不需要煩瑣地一張一張製作圖片。更具意義的是，產生的陰影不會對版面編排造成影響。
適合：有 html 及 css 語法基礎概念者。
難度：
更新：2011-06-16
支援： firefox, google chrome, opera, ie9 (至撰文時) 。

css attribute selectors (css 屬性指標)

樹狀選單加入樹狀線條的設計
說明：設計具有樹狀線條的資料夾選單或樹狀選單 (folder menu or tree menu)。本篇的討論僅適用一層子選單，更多層子選單的設計方式，以後再討論。
適合：有設計網頁及撰寫 css 語法經驗者。
難度：
更新：2008-10-13

具有半透明值 (alpha 色版) 的 css 3 顏色單位