CSS / 背景 / グラデーション

CSS / 背景 / グラデーション

デザイン的な注意

彩度ゼロを迂回する

https://coliss.com/articles/build-websites/operation/design/the-gray-dead-zone-of-gradients.html

どういうことかというと、補色のような対比が強いグラデーションを使うと、中間部の彩度がなくなるポイントができて汚いので、 中間色で彩度がなくなる部分迂回してやるといいよという話。

マッハバンド(トーンジャンプ)回避

人間の目の錯覚でなめらかな明度変化を伴うグラデーションの境界付近に存在しないのに境界部が強調されてなめらかに見えなくなる現象。

回避方法ととして微量のノイズを付加したり、全体的にぼかしたりするとよいらしい。

これは色の変化がきっちり均等に均等なタイミングでおきるからよくない(錯覚部分が同じ箇所に集中して特徴的な形状として現れてしまう)ということで、グラデーションの方向性とは関係ない無指向な外乱を加えてやればそれを緩和できるぞという話。 逆に言うとやりすぎるとグラデーションが乱れて汚くなる。

グラデーションの設定値の扱い

用例ではよく background に対して設定されているが、これで指定してしまうと他の設定との共存ができない。

gradient は色を塗っているのではあるがレイヤーとしては background-image の一部として扱われる。

なので background-image に複数画像の一部として指定したり、background-color で指定した色の上にのっけたりできる。

グラデーションの基準位置指定

色に続きグラデーションの色の基準位置を指定することができる。 間違えやすいのはここで指定するのは、開始点でもそのグラデーションが占める割合でも無いということ。 ここで指定した値の位置が最も指定した色になるようにグラデーションがつく

つまり隣り合う違う色に対して同じ値を指定するとそこでグラデーションせずにバッツリ切れるという動作になる。

きっちり2色に塗る

こうなる

background-image: linear-gradient(90deg, blue 0%, blue 30%, red 30%, red 100%);

色のパラメータとして4箇所指定していてこのように指定する。 順番にパラメータを A,B,C,D とすると

  • A 0%
  • B 色は A と同じで位置は C と同じ
  • C 色は D と同じで位置は B と同じ
  • D 100%

真ん中色、両端透明

background: linear-gradient(to left, transparent 0%, #FF0000 50%, transparent 100%);

このコードのポイントは全体の中でどのポイントを一番その色にするかを%で表しているところにある。

色の指定としては両端透明なので真ん中だけ残したモノになる。

to left と指定しているので右から左に向かっての指定となる。

css/background/gradient.txt · 最終更新: 2021-03-31 20:42 by ore