css gradient 漸層設計冥想
- 說明: css level 3 (css 3) gradient 歷經數年數次的規則編修,終於有了底定的態勢,多家瀏覽器也在本文發表的當年有了更完整的支援,讓我們不需再完全只能依賴像素化圖形製作漸層。特別僅運用 CSS gradient 技術,設計出令人意想不到的圖案 (patterns) ,期望能激發更多的設計想像空間。
- 適合:想模仿範例自行製作者,須熟悉 html 及 css 語法,並有使用繪圖軟體漸層經驗。
- 難度:
- 更新:
- 支援:詳細可參考 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,……
。
- 以函數 (function) 形式表示,當作如
- 語法實例
-
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) 表示:-
-
farthest-side
- 以離圓心最遠的一邊,水平與垂直的距離為半徑。
-
farthest-corner
- 以離圓心最遠的一角為漸層橢圓形的邊緣 (100% color-stop) ,水平與垂直半徑比例依據
farthest-side
時的比例。此為内定值 (没有指定時) 。
-
closest-side
- 以離圓心最近的一邊,水平與垂直的距離為半徑。
-
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,……
。
- 以函數 (function) 形式表示,當作如
- 語法實例
-
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 官方文件 (英文) 。
CSS 漸層無接縫背景桌布創意發想
撰文時,各家瀏覽器尚有些許瑕疵; firefox 僅在部分細微處有偏色問題; IE 僅有一範例錯誤,表現很佳;出乎意料地, google chrome 非常糟。範例中有標註最正確呈現的瀏覽器,讀者可自行比較。部分範例以 css
animation
加入動畫效果,以彰顯一般繪圖軟體或 flash 很難處理的技術。css gradient 視覺冥想 (範例來源連結)