CSS Gradient (アドベントカレンダー: 今年お世話になったCSS)
こんにちは!ヒデトです!
私はフロントエンドの勉強をし始めて8ヶ月ほどが経ち、CSS も少しは使いこなせるようになってきました。
この記事は、アドベントカレンダーの「今年お世話になったCSS」に参加し、3日目の寄稿者として書いています。大好きなCSSの中でも「こいつはカッコイイぜ!」と思ったGradientについての記事です。どうぞ最後までお付き合いください。
今年お世話になったCSS Advent Calendar 2016 - Adventar
↓ちょっとその前に少しだけ自己紹介と決意表明
私は去年までアメリカのシアトルで3年間働いていたのですが、「俺はWeb Developerになる!」と決意し、今はカナダのバンクーバーでFront-End Developerになるべく猛勉強中です。来年4月に1年間の専門学校を終え、バンクーバーで就職する予定です。あと4ヶ月踏ん張るぞ!頑張るぞ!
それではGradientの話をしていきましょう!
Gradientとは
複数の色をグラデーションにして表示できるものです。色は2つとは限らず、幾つでも指定することができます。gradientは主にバックグラウンドに使用することが多いですが、文字などにも適用することもできます。
ブラウザの対応状況
基本的には最近のブラウザは対応しているようです。このグラフには載っていないのですが、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
長々と説明してきましたが、このサイトを使えば直感的にグラデーションを作ることができるのでとても楽です。
Gradient 重ね技
background-imageを使い、gradientを幾つか重ねることで複雑な模様を作ることも可能なようです。私にはまだまだこのレベルには達していません。以下のリンクをちょろっと見てみてください。
バンクーバー在住のクリエイター&デベロパーによるアドベントカレンダー
ぜひ、こちらもチェックしてみてください!
Frog Advent Calendar 2016を開催するので、参加者を募集します! | Frog
参照
Can I use... Support tables for HTML5, CSS3, etc