グラデーション

雲間から差す光が印象的だったのだが、写真だとそんな光があるのかどうかも微妙な状態に。

gradient

日々進化して、いつの間にか便利な機能が実装されているのがwebの世界。 これまであまり興味が無かったcssのグラデーションについて調べてみたら、直線や放射方向に加えて回転方向の指定もできるようになっていた。 最初からできてて、俺が知らなかっただけって可能性もあるが。

せっかくなので、復習も兼ねて一通り試してみる。

linear-gradient

まずは直線方向。 角度指定は時計のスタイル。 12時方向を0度として時計回りに。 開始位置と終了位置は領域全体。 角度指定が0度なら、下の端から上の端まで。 色は rgba での指定も可能。

グラデーションの領域を複数に分割することができる。 最初の領域の開始位置を示す "0%" と、最後の領域の終了位置を示す "100%" は省略可能。 開始と終了の色を同じにするとベタ塗りになる。 その場合、色と開始位置と終了位置をセットで指定できる。

radial-gradient

次に放射方向。 開始位置は領域の中心で、終了位置は角。 厳密に言うと、放射の中心が 0% で、そこから領域内で最も遠い角を 100% とするのがデフォルト。 角か辺か、遠くか近くか、それぞれの組み合わせで終了位置を指定できる。

放射の中心を変える例。 領域内相対で指定しているが、他のパラメーター同様 px 等の指定も可能。 座標の原点は左上。 単に上の例の中心位置が移動するのではなく、移動した中心位置からグラデーションの終端位置も再計算される。

領域分割の考え方は直線と同じ。 開始位置と終了位置の色を同じにするとベタ塗りになるのも。

conic-gradient

そして回転方向。 回転の中心は領域の中心。 12時の方向を開始位置0度として、時計回りに360度が終了位置。 ちなみに conic を辞書で引いたら円錐だった。 え？ 円錐？ これが円錐？

中心位置を変える場合の考え方は放射方向と同じ。

領域分割の例。

組み合わせ

やろうと思えばもっと細かく色々できる。 設定の意味を判り易くするためのキーワードを使った指定もできる。 "90deg" なら "to right" とか。 まあとにかく出来ることもその手段も色々あるのだが、基本的な指定だけでも大体なんとかなりそう。 ということで、応用例として円グラフを表現してみた。

その1

その2

いずれも回転方向でベタ塗りしたものを、放射方向のベタ塗りでマスクしている。 マスクは、見せたいところだけ透過指定。

htmlの要素も、背景指定以外のcssも、基本的に後から指定したものが優先されるよな。 だから表示が重なった場合は、後から指定したものが上に、つまり手前に見えることになる。 しかし背景指定だけは逆。 何故？

俺には違和感がある仕様だが、世間には特に疑問もなく受け入れられているのだろうか。 むしろ逆で、実際のレイヤーと同じだと歓迎されていたりするのかな。 まあどうであれ、使うなら受け入れるしか無いのだが。

今日ここで試した3種のグラデーションには、全て繰り返し対応版がある。 そっちもそのうち試してみよう。