2018.06.27

【CSS】グラデーションをかけてみよう

目次

CSSで使えるグラデーション

CSSで使えるグラデーションは、線形グラデーション(linear-gradient)と円形グラデーション(radial-gradient)の2つがあります。

linear-gradient

radial-gradient

ここでは、比較的よく使うlinear-gradientについて解説していきます。

linear-gradient()

linear-gradient()はプロパティではなく関数のため、backgroundプロパティの値としてlinear-gradient()を指定します。

()の中の値は複数指定でき、それぞれの値はコンマ(,)で区切ります。

グラデーションの方向

linear-gradient()の()の中に指定する1つ目の値は、グラデーションの方向に対応しています。方向は単語(rightなど)や度数(deg)で指定する方法があります。

単語で指定する場合は、「to top」「to right」のように、toを付けてその後に方向を書くようにします。ちなみに「to top」「to right」「to bottom」「to left」はそれぞれ上、右、下、左に向かってグラデーションがかかり、「to top right」というように指定すると、(左下から)右上に向かってグラデーションがかかります。もちろん、「to bottom right」や「to bottom left」などの指定も可能です。

度数で指定する場合は、「0deg」「45deg」などのように、数字の後にdegを付けて指定します。また、0degは「to top」と同じでグラデーションの向きは上になります。覚え方は、時計の針の向きを考えればいいと思います。0時(上)の方向が0degで、針が右上を向くと45deg、右を向くと90deg、右下だと135deg・・・といった感じで、針が0時の位置からどれだけ離れているかを考えると分かりやすいかと思います。もちろん、「22deg」のような細かい指定もできます。


グラデーションの色

()の中の2つ目以降の値は、グラデーションの色と対応しています。

例えば、下の例では左から右に向かってgreenからyellowに色が変化しているのが分かります。


↓また、色は3色以上指定することもできます。



グラデーションの位置

色の後ろに半角スペースで区切って%を指定すると、その色が表示される位置を自由に変えることができます。


↑上の例では、greenの位置が左から33%の位置になっているため、左端から33%の位置まではグラデーションがかからずgreenのままで、yellowの位置が左から66%の位置になっているため、33%の位置から右端までグラデーションがかかっています。

その位置がその色になる!」といったイメージで覚えておくと分かりやすいかと思います。

透明なグラデーションを画像に重ねる

グラデーションの色はrgbaで透明にすることができ、それを画像に重ねることもできます。やり方は、linear-gradient()の後ろに、コンマ(,)で区切ってurl()を指定すればOKです。


↑右の画像のように、赤色系と青色系のグラデーションのフィルターがかかっているのが分かります。

少し応用的な内容ですが、画像に透明なグラデーションをかけられるようになると表現の幅がグッと広がるので、ぜひとも覚えておきたいテクニックの一つです。

home

scroll