CSSのlinear-gradientの使い方。degの意味や半透明にする方法も紹介

0

トップページに画像がバン!とあり、それに半透明のグラデーションがかった効果。前に流行ったデザイン手法ですね。

これは全てCSSのlinear-gradientで実装されています。一度、理解してしまえば早いのですが初見では分かりづらいのも事実。

今回はCSSのlinear-gradientを詳しく紹介します。

まず先にlinear-gradientの例を見てみる

さっそくですが、簡単に事例を見てみましょう。

今回、トップページに大きな画像を配置し半透明のグラデーションを追加してみます。

まず、グラデーション効果がない場合。

 

これにlinear-gradientでグラデーションを付けてみます。

 

背景画像の上に半透明のグラデーションをマスクのように被せているだけで、実装は非常に簡単です。

該当のソースコードは上記のようになります。

このコードだけで、背景画像のパス指定とグラーデーションの効果を付与しています。

 

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

 

なお、今回のケースでは色を二つ指定しています。青と紫ですね。二つの色を指定することで、青→紫とグラーデーションを付けています。

コード中に%がありますが、これはx%の箇所からxの色が開始するというものになります。rgba(#青色) 20%であれば20%の場所から青色が開始するというものになります。

この部分に関しては実際の表示を見て調整した方が分かりやすいと思います。

 

半透明にする方法

ここまで色の指定方法を紹介しました。

次に半透明にする方法を見ていきます。

ここで、もう一度コードを見てみます。

半透明にする部分は赤字で記述した部分です。0.1〜1の値で指定します。(0.111などでも出来ますが)

1に近づくほど透明度がなくなります。つまり、この場合だと指定した青や紫の色がはっきりと出てしまうことになります。

実際にブラウザで確認しながら、ここの値を変更してみるといいでしょう。

 

まとめ

というわけで、今回はCSSのlinear-gradientを紹介しました。

トップページにいっぱいの画像を配置して、そこにグラデーションを付けることで簡単にいい感じのトップページを完成させることができます。

CSSだけで実装することができますので、ぜひ試してみてください。

 

今回はグラーデーションを紹介しましたが、色をハッキリと分けることもできます。

これも同じくlinear-gradientの機能になりますが、詳しくは下記の記事をご覧ください。

【CSS】背景画像に半分ずつの半透明の色を載せる方法









 

About Author

Comments are closed.