グラデーションのこと

2023-08-12

こんばんは、氷翠です。

今日はタイトルの通り、グラデーションのこと。

まぁ、今更という意見もあるが、改めてここで記録しておこうと思う。

グラデーションって、奇麗なイメージがあるが、色によっては汚い感じにもなる。そして、そのグラデーションの上に文字を置いても、見えづらかったり、イメージとはかけ離れたものに見えることもある。

まずはグラデーションのCSS。

.gradation {
  background: linear-gradient(0deg, rgb(30,30,30) 0%, rgb(200,200,200) 100%);
}

こんな感じで定義することができる。前は「–webkit-」とかってつけたりしてグラデーションを定義していたけど、今ではほとんどのブラウザが対応しているようだ。

さて、このグラデーションの上に文字を置くと…

上の方に文字があるので、まだ見えていることでしょう。しかし、下の方にあると見えづらくなってきます。真ん中の文字なんてどっちつかずでよくわからん状態。で、あれば、文字を上に置くと分かっているのであれば、似たようなグラデーションを使うほうがよい。

わずかなグラデーションなのでわかりづらいかもしれないけど、ずっと文字が分かりやすい。他の色でも文字色と背景色が全くちがうものであれば問題はないはず。ただ、その色によっては読みづらいものになってしまうかもしれないので、配色には十分に気をつけたほうがいいだろう。