CSSのlinear-gradientの使い方。degの意味や半透明にする方法も紹介
トップページに画像がバン！とあり、それに半透明のグラデーションがかった効果。前に流行ったデザイン手法ですね。
これは全てCSSのlinear-gradientで実装されています。一度、理解してしまえば早いのですが初見では分かりづらいのも事実。
今回はCSSのlinear-gradientを詳しく紹介します。
linear-gradientとは
linear-gradientとは背景画像や動画の上に半透明のグラデーションを被せるものです。
background-image:
linear-gradient(-225deg,rgba(6,183,239,0.7) 10%,
rgba(149,15,159,0.7) 80%),url(img/home.jpg);上記のようなコードで実装できます。
このコードだけで、背景画像のパス指定とグラーデーションの効果を付与しています。
degとは？
コードの中を一つずつ見ていきます。
linear-gradientでグラーデーションと画像を指定します。値はlinear-gradient()の中に指定していきます。
まず、degの部分ですがこれはグラデーションが向かう角度を表します。90degなら90度。180degなら180度といった具合です。
なお、この角度は反時計回りになるので90degなら左から右に向かう横へのグラデーションとなります。
色の指定方法
色の指定はrgbaで行います。rgba(6,183,239)とありますがこれは色を指定しているわけですね。
photoshopやsketchなどのツールを使えば、このrgbaの値は簡単に取得することができます。
こうしたツールがない人でも無料のオンラインツールはたくさんあるので、簡単に取得することは可能です。
下記にMozillaが提供するツールを紹介しますので参考にしてみてください。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool
なお、今回のケースでは色を二つ指定しています。青と紫ですね。二つの色を指定することで、青→紫とグラーデーションを付けています。
半透明にする方法
ここまで色の指定方法を紹介しました。
次に半透明にする方法を見ていきます。
ここで、もう一度コードを見てみます。
background-image:
linear-gradient(-225deg, rgba(6,183,239,0.7) 10%,
rgba(149,15,159,0.7) 80%), url(img/home.jpg);半透明にする部分は赤字で記述した部分です。0.1〜1の値で指定します。(0.111などでも出来ますが)
1に近づくほど透明度がなくなります。つまり、この場合だと指定した青や紫の色がはっきりと出てしまうことになります。
実際にブラウザで確認しながら、ここの値を変更してみるといいでしょう。
まとめ
というわけで、今回はCSSのlinear-gradientを紹介しました。
トップページにいっぱいの画像を配置して、そこにグラデーションを付けることで簡単にいい感じのトップページを完成させることができます。
CSSだけで実装することができますので、ぜひ試してみてください。
今回はグラーデーションを紹介しましたが、色をハッキリと分けることもできます。
これも同じくlinear-gradientの機能になりますが、詳しくは下記の記事をご覧ください。
