css gradient 漸層視覺設計範例

css gradient 漸層設計冥想

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

Linear Gradients 直線形漸層 ₪

標準語法

linear-gradient(direction, color-stop, ……, color-stop)
repeating-linear-gradient(direction, color-stop, ……, color-stop)

說明

• 以函數 (function) 形式表示，當作如 background-image, list-style-image 之類的值。
• direction 參數，表示漸層顔色變化的方向。以 deg (角度) 為單位，惟 0deg 是由下往上的垂直方向 (漸層為水平呈現) ，正的角度依順時鐘旋轉。内定值 (没有指定時) 為 180deg ，也就是由上往下的垂直方向。
• direction 參數也可由 top, bottom, left, right 等特別字 (keywords) 表示，如 to top, to right, to bottom, to left ，分別表示 0deg, 90deg, 180deg, -90deg 。而如 to bottom right 則表示漸層分佈由 gradient box 左上角往右下角 (斜對角) 的方向。當作 background-image 時， gradient box 通常就是 background-size 的範圍。
• color-stop 參數，表示漸層的顔色及分佈，可分爲二部分，顔色及色佈，中間至少需以一半形空格分隔，當然可以有很多組 color-stop 。顔色表示方式可參考 color units ；色佈 (顔色分佈位置) 可以 css 各種標準尺寸單位表示 (如 %, px, em, …) ，可以接受小於 0% 及大於 100% ，有時候 0% 或 100% 的位置可省略，如果都沒有指定色佈，瀏覽器應由 0% 至 100% 自動平均分配位置。而如需精準計算尺寸，可參考 w3c 圖示 。
• repeating-linear-gradient() 與 linear-gradient() ，差別在前者會無限重複呈現，仿如 ……, color-stop, color-stop,…… 。

語法實例

background-image:linear-gradient(30deg,hsl(30,100%,80%), hsl(120,80%,50%));
background-image:linear-gradient(to bottom left, hsl(240,100%,50%), hsl(60,100%,75%) 35%, hsl(240,100%,50%));
list-style-image:repeating-linear-gradient(45deg, hsl(260,100%,50%), hsl(260,100%,50%) 5%, transparent 5%, transparent 10%);

Radial Gradients 放射形漸層 ₪

標準語法

radial-gradient(size at cp, color-stop, ……, color-stop)
repeating-radial-gradient(size at cp, color-stop, ……, color-stop)

說明

• 以函數 (function) 形式表示，當作如 background-image, list-style-image 之類的值。
• size at cp 參數，表示放射形漸層橢圓形的半徑尺寸 (size) 及圓心位置 (cp) 。圓心為漸層的始點，指定方式與 background-position 相同，内定值 (没有指定時) 為 center ，表示 gradient box 中心點。當作 background-image 時， gradient box 通常就是 background-size 的範圍。半徑 (size) 可以是 css 各種標準尺寸單位表示 (如 %, px, em, …) ，二個值以半形空格分隔表示橢圓形水平與垂直半徑，如果僅一個值表示正圓形，但一個值不接受 % 為單位；而 % 是以 gradient box 的範圍來計算。漸層橢圓形的尺寸是獨立的，不一定要符合 gradient box 。

• size 也可依 gradient box 為基準，由幾個特別字 (keywords) 表示：

  1. farthest-side

     以離圓心最遠的一邊，水平與垂直的距離為半徑。

  2. farthest-corner

     以離圓心最遠的一角為漸層橢圓形的邊緣 (100% color-stop) ，水平與垂直半徑比例依據 farthest-side 時的比例。此為内定值 (没有指定時) 。

  3. closest-side

     以離圓心最近的一邊，水平與垂直的距離為半徑。

  4. closest-corner

     以離圓心最近的一角為漸層橢圓形的邊緣 (100% color-stop) ，水平與垂直半徑比例依據 closest-side 時的比例。

• color-stop 參數，表示漸層的顔色及分佈，可分爲二部分，顔色及色佈，中間至少需以一半形空格分隔，當然可以有很多組 color-stop 。顔色表示方式可參考 color units ；色佈 (顔色分佈位置) 可以 css 各種標準尺寸單位表示 (如 %, px, em, …) ，可以接受小於 0% 及大於 100% ，有時候 0% 或 100% 的位置可省略，如果都沒有指定色佈，瀏覽器應由 0% 至 100% 自動平均分配位置。 0% 表示漸層橢圓形圓心； 100% 表示漸層橢圓形邊緣。
• repeating-radial-gradient() 與 radial-gradient() ，差別在前者會無限重複呈現，仿如 ……, color-stop, color-stop,…… 。

語法實例

background-image:radial-gradient(100px, hsl(50,100%,70%), hsl(240,100%,30%));
background-image:radial-gradient(60px 120px at 60px 120px, hsl(0,100%,95%), hsl(0,100%,90%) 30%, hsl(0,100%,95%) 40%, hsl(0,100%,95%) 42%, hsl(0,75%,86%) 99%,transparent);
background-image:repeating-radial-gradient(farthest-side at top, hsl(240,100%,96%), hsl(240,100%,96%) 6px, transparent 6px, transparent 16px);
list-style-image:repeating-radial-gradient(hsl(120,100%,50%), hsl(120,100%,50%) 2px, transparent 2px, transparent 3px);

參考→基本範例教學

參考資源

• css Image Values : gradients - w3c 官方文件 (英文) 。