[CSS]CSSグラデーションのあまり知られていない書き方
あまり使ってる人見たことないなあ、っていうCSSグラデーションの書き方を紹介します。
使う必要がないから使ってないのかもしれないですし、そちらの可能性の方が高そうです。
1つの色領域に2つの位置指定
1つの色に対して2つの位置を指定できます。
グラデーションの中でも単色で塗りたい範囲をシンプルに記述できます。
例えばフランスの国旗をCSSグラデーションで書くとしたら、従来はこのように書いていました。
.fr {
background-image: linear-gradient(
to right,
#002395 0%,
#002395 33.3%,
#ffffff 33.3%,
#ffffff 66.7%,
#ed2939 66.7%,
#ed2939 100%%
)
}
これは下記のように書き換えることができます。
.fr {
background-image: linear-gradient(
to right,
#002395 0% 33.3%,
#ffffff 33.3% 66.7%,
#ed2939 66.7% 100%
)
}
断然シンプルですね。
最初の位置と最後の位置には同じ色の0%と100%が勝手に補完される仕様もあるので、さらにシンプルにすることができます。
.fr {
background-image: linear-gradient(
to right,
#002395 33.3%,
#ffffff 33.3% 66.7%,
#ed2939 66.7%
)
}
実際に動かせるデモを用意してみました。
対応ブラウザ
IE以外なら問題なく使えます。
"gradient double position" | Can I use... Support tables for HTML5, CSS3, etc
補完ヒントの指定
カンマ区切りで色を指定した部分をそれぞれカラーストップと言います。
（良い和訳がわかりません。中継点とかが妥当でしょうか？）
.box {
background-image: linear-gradient(
to right,
red 20%, /* ← カラーストップ */
green 50%, /* ← カラーストップ */
blue 80% /* ← カラーストップ */
)
}
このカラーストップ同士の間に、補完ヒントを書くことができます。
通常は2色間の色の混ざり方は線形ですが、補完ヒントを書くと2色の間のちょうど半分になる位置を調整することができます。
補完ヒントは位置のみ指定します。
.box {
background-image: linear-gradient(
to right,
red 20%, /* ← カラーストップ */
25%, /* ← 補完ヒント */
green 50%, /* ← カラーストップ */
75%, /* ← 補完ヒント */
blue 80% /* ← カラーストップ */
)
}
補完ヒントが書かれていない場合は、両隣のカラーストップ位置のちょうど半分の位置が補完ヒントとして利用されていることと同義になります。
下記の2つは同じ意味です。
.box1 {
background-image: linear-gradient(
to right, red 20%, blue 50%
)
}
.box2 {
background-image: linear-gradient(
to right, red 20%, 35%, blue 50%
)
}
実際に見た方がイメージしやすいのでこれもデモを用意しました。
対応ブラウザ
こちらもIE以外で問題なく使えます。
"gradient interpolation hints" | Can I use... Support tables for HTML5, CSS3, etc
Discussion