menu
書いてる野郎
orebike@gmail.com
https://coliss.com/articles/build-websites/operation/design/the-gray-dead-zone-of-gradients.html
どういうことかというと、補色のような対比が強いグラデーションを使うと、中間部の彩度がなくなるポイントができて汚いので、 中間色で彩度がなくなる部分迂回してやるといいよという話。
人間の目の錯覚でなめらかな明度変化を伴うグラデーションの境界付近に存在しないのに境界部が強調されてなめらかに見えなくなる現象。
回避方法ととして微量のノイズを付加したり、全体的にぼかしたりするとよいらしい。
これは色の変化がきっちり均等に均等なタイミングでおきるからよくない(錯覚部分が同じ箇所に集中して特徴的な形状として現れてしまう)ということで、グラデーションの方向性とは関係ない無指向な外乱を加えてやればそれを緩和できるぞという話。 逆に言うとやりすぎるとグラデーションが乱れて汚くなる。
用例ではよく background に対して設定されているが、これで指定してしまうと他の設定との共存ができない。
gradient
は色を塗っているのではあるがレイヤーとしては background-image
の一部として扱われる。
なので background-image
に複数画像の一部として指定したり、background-color
で指定した色の上にのっけたりできる。
色に続きグラデーションの色の基準位置を指定することができる。 間違えやすいのはここで指定するのは、開始点でもそのグラデーションが占める割合でも無いということ。 ここで指定した値の位置が最も指定した色になるようにグラデーションがつく
つまり隣り合う違う色に対して同じ値を指定するとそこでグラデーションせずにバッツリ切れるという動作になる。
こうなる
background-image: linear-gradient(90deg, blue 0%, blue 30%, red 30%, red 100%);
色のパラメータとして4箇所指定していてこのように指定する。 順番にパラメータを A,B,C,D とすると
background: linear-gradient(to left, transparent 0%, #FF0000 50%, transparent 100%);
このコードのポイントは全体の中でどのポイントを一番その色にするかを%で表しているところにある。
色の指定としては両端透明なので真ん中だけ残したモノになる。
to left と指定しているので右から左に向かっての指定となる。