要素をグラデーションで塗りつぶすスタイル。
線形と円形のグラデーションがあり、それぞれ細かく指定できる。
グラデーションは内部的には背景画像として扱われるため、繰り返したり位置をずらしたりすることもできる。
また、異なるグラデーションを重複指定することで複雑なパターンも作成できる。
言い換えると画像を生成するスタイルであり、デザインによっては画像を作成してダウンロードさせる過程を省ける。使わない理由のないスタイルとも言える。
デモ
線形グラデーション
円形グラデーション
複合
注意
- より複雑なパターンも作り出せるが、複雑すぎる場合は画像にした方が良い。
- コード的には扱いにくいスタイルと思われる。
- 一点、グラデーションの各カラーストップをエンジニアに伝える作業が発生するかもしれない。
応用例
See the Pen Animated CSS Gradient Border by Mike Schultz (@mike-schultz) on CodePen.