CSS Gradient (アドベントカレンダー: 今年お世話になったCSS)

 こんにちは!ヒデトです!

f:id:Hideto0118:20161202120908p:plain

 

私はフロントエンドの勉強をし始めて8ヶ月ほどが経ち、CSS も少しは使いこなせるようになってきました。

この記事は、アドベントカレンダーの「今年お世話になったCSS」に参加し、3日目の寄稿者として書いています。大好きなCSSの中でも「こいつはカッコイイぜ!」と思ったGradientについての記事です。どうぞ最後までお付き合いください。

今年お世話になったCSS Advent Calendar 2016 - Adventar

 

↓ちょっとその前に少しだけ自己紹介と決意表明

私は去年までアメリカのシアトルで3年間働いていたのですが、「俺はWeb Developerになる!」と決意し、今はカナダのバンクーバーでFront-End Developerになるべく猛勉強中です。来年4月に1年間の専門学校を終え、バンクーバーで就職する予定です。あと4ヶ月踏ん張るぞ!頑張るぞ!

 

それではGradientの話をしていきましょう!

 Gradientとは

複数の色をグラデーションにして表示できるものです。色は2つとは限らず、幾つでも指定することができます。gradientは主にバックグラウンドに使用することが多いですが、文字などにも適用することもできます。

 

ブラウザの対応状況

f:id:Hideto0118:20161201114109p:plain

基本的には最近のブラウザは対応しているようです。このグラフには載っていないのですが、IE10も対応しており、それ以前は未対応のようです。

対応状況を詳しく知りたい方は以下のCan I Useのサイトでチェック!

Can I use... Support tables for HTML5, CSS3, etc

 

Gradientの種類

種類は4つ!

  • linear-gradient
  • radial-gradient
  • repeating-linear-gradient
  • repeating-gradial-gradient

 

言葉で説明しても分かりにくいのでCodepenで作っていくことにしましょう!

 

linear-gradient (上下方向へのグラデーション)

See the Pen linear-gradient by Yas (@Hideto) on CodePen.

1段目のboxでは、グラデーションの方向はデフォルトの「下方向」です。

2段目のboxでは、「to right」を入れたので「右方向」に変わりました。

同様に「to bottom」「to left top」「90deg」などを入れることでグラデーションの方向を変えることができます。

3段目のboxでは、「-45deg」で指定しています。

 

radial-gradient (円形のグラデーション)

See the Pen radial-gradient by Yas (@Hideto) on CodePen.

円形のグラデーションでは、ボックスの形によりデフォルトの円の形が変わるようです。正方形なら正円になり、長方形であれば楕円になります。また、楕円のgradientに「circle」のプロパティ値を入れれば正円になるります。デフォルトが正円であるものに「elipse」を加えても楕円にすることはできません。

また、「at top」「at left bottom」もしくは「at 50% 25%」のように書き加えれば、円の中心点を指定することができます。パーセントを使う場合には「at X軸% Y軸%」のように書きます。デフォルトではボックスの真ん中に中心点が来ます。linearに使用するような「90deg」や「to right」のような指定は出来ません。

例)background: radial-gradient(circle at 30% 20%, magenta, cyan, gold); 

 

gradient (テキスト)

See the Pen Gradient for Text (linear and radial) by Yas (@Hideto) on CodePen.

テキスト横方向のグラデーション

background: linear-gradient(to right, fuchsia,yellow);  

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

 

テキスト円形のグラデーション

background: radial-gradient(fuchsia,yellow);

 -webkit-background-clip: text;

-webkit-text-fill-color: transparent;

上記のコードを使うことで、テキストをグラデーションカラーにすることができます。しかしCan I Useによると、text-fillは IE、Edge、Opera Miniでは対応していないと書かれていました。念のためEdgeで確認したところ、Edgeでもグラデーションで表示されていました。対応が進んでいるようですね。

 

repeating-gradient (linear & radial)

See the Pen repeating-gradient by Yas (@Hideto) on CodePen.

 linearでもradialでも、reapeatingを使うことがきます。

例えば上のcodepenの中にあるように、

background: repeating-linear-gradient(cyan ,yellow 20%);

background: repeating-radial-gradient(fuchsia, yellow 10%);

のように書きます。

また、transparentやrgbaを使うことでゼブラ模様もこのように作れたりします。このゼブラ模様では色の指定時にパーセントではなくピクセルを指定しています。

background-color: black;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);

Gradient Generator

長々と説明してきましたが、このサイトを使えば直感的にグラデーションを作ることができるのでとても楽です。

Online Gradient Generator

 

Gradient 重ね技

 background-imageを使い、gradientを幾つか重ねることで複雑な模様を作ることも可能なようです。私にはまだまだこのレベルには達していません。以下のリンクをちょろっと見てみてください。

CSS3 Patterns Gallery

 

 

バンクーバー在住のクリエイター&デベロパーによるアドベントカレンダー

 ぜひ、こちらもチェックしてみてください!

Frog Advent Calendar 2016を開催するので、参加者を募集します! | Frog

 

参照

CSS3 Gradients

Can I use... Support tables for HTML5, CSS3, etc