css gradient 漸層設計冥想

  • 說明: css level 3 (css 3) gradient 歷經數年數次的規則編修,終於有了底定的態勢,多家瀏覽器也在本文發表的當年有了更完整的支援,讓我們不需再完全只能依賴像素化圖形製作漸層。特別僅運用 CSS gradient 技術,設計出令人意想不到的圖案 (patterns) ,期望能激發更多的設計想像空間。
  • 適合:想模仿範例自行製作者,須熟悉 htmlcss 語法,並有使用繪圖軟體漸層經驗。
  • 難度:等級1
  • 更新:
  • 支援:詳細可參考 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 漸層無接縫背景桌布創意發想

撰文時,各家瀏覽器尚有些許瑕疵; firefox 僅在部分細微處有偏色問題; IE 僅有一範例錯誤,表現很佳;出乎意料地, google chrome 非常糟。範例中有標註最正確呈現的瀏覽器,讀者可自行比較。部分範例以 css animation 加入動畫效果,以彰顯一般繪圖軟體或 flash 很難處理的技術。

css gradient 視覺冥想 (範例來源連結)

參考資源
散佈、展示請參閱 Creative Commons 授權條文,禁止重混,引述請增加原文連結。
arrow
arrow

    不老師 發表在 痞客邦 留言(3) 人氣()