さて、今回は覚えておきたいCSSの第３弾です。
今回ご紹介するのは2つのCSS機能です。
- グラデーション
- ボックスシャドウ
- テキストシャドウ
です。
その前にベンダープレフィックスについて触れておきます。
ベンダープレフィックスとは
ベンダープレフィックスとは、Chrome、Safari、Firefox、Internet Explorerなどのブラウザの種類を特定する識別子です。
主なベンダープレフィックスは、以下の通り。
| -moz- | Firefox |
| -webkit- | Google Chrome Safari |
| -ms- | Internet Explorer |
2022年1月現在グラデーションで指定する方向（to 方向）と角度は、
Google,Chrome,Safariではベンダープレフィックスをつけなくても同様に表示されています。
注意しなければいけないのは、方向や角度ではなく開始位置を指定した場合です。
開始位置を指定できるのは、
-webkitと-mozのみです。
グラデーションの基本
グラデーションを理解する上でまずシンプルな書き方はこちら。
background: linear-gradient(pink, skyblue);方向や角度を指定しなければグラデーションの方向は上から下がデフォルトです。
色の開始位置と終了位置はpx指定でも％指定でもOK。
斜めやストライプなどグラデーションではなくくっきり表示させる場合は、
開始位置の数値を同じにするかゼロを指定します。
background: linear-gradient(30deg, pink 80px, skyblue 80px);background: linear-gradient(30deg, pink 80px, skyblue ０);ストライプはこちら。
background: repeating-linear-gradient(40deg, pink 0 10px, skyblue 10px 20px);いくつかグラデーションの例を書いてみました。
4つ目の指定は-mozなのでFirefoxでないと表示されません。
See the Pen linear-gradient by J&SadaKo (@jandsadako) on CodePen.
グラデーションの種類
グラデーションは大きく分けて３つあります。
- 線形グラデーション
- 円形グラデーション
- 繰り返しグラデーション
順番にみていきましょう。
線形グラデーション
linear-gradient(方向,開始点の色 位置,終了点の色 位置)
色の分岐点が複数ある場合はカンマで区切って書き足します。
background-image: linear-gradient(150deg, rgba(247, 166, 12, 1) 10%, rgba(255, 34, 87, 1) 40%, rgba(154, 39, 238, 1) 68%, rgba(35, 102, 247, 1) 90%);
円形グラデーション
radial-gradient(形状,サイズ,開始点,開始点の色と位置,終了点の色と位置)
線形グラデーション同様、色が複数ある場合はカンマで区切って付け加えます。
background-image: radial-gradient(circle, rgba(255, 242, 58, 1), rgba(101, 233, 16, 1) 50%, rgba(16, 164, 233, 1));
繰り返しグラデーション
繰り返しグラデーションはストライプ柄に使えます。
- repeating-linear-gradient(方向,開始点の色 位置,終了点の色 位置);
- repeating-radial-gradient(形状,サイズ,開始点,開始点の色と位置,終了点の色と位置)
background-image: repeating-linear-gradient(90deg, rgba(255, 246, 222, 1) 4% 8%, rgba(255, 179, 15, 1) 8% 12%);
グラデーションを簡単に作れるジェネレーター
グラデーションを簡単に作るにはジェネレーターを使うと便利です。
一例ですが、CSSグラデーションジェネレーターがあります。
上に書いたCSSもジェネレーターから書き出しています。
好きな色に微調整もでき、自動でCSSが表示されます。
illustratorからグラデーションのCSSを読み取る方法
さらに、illustratorからCSSを読み取る方法をご紹介します。
グラデーションが描かれているレイヤーをクリックした状態で、
ウィンドウ > CSSプロパティ を押すだけです。
もしも下のように表示されなかったときは、
①左下の書き出しオプションをクリック
②「名称未設定オブジェクト用にCSSを生成」にチェック
をすればOKです。
ボックスシャドウ
ボックスシャドウは名前の通り影をつけるプロパティです。
box-shadow: 色,左右へぼかす値,上下へぼかす値,ぼかす強さ,ぼかしを広げる距離,inset;
左右へぼかす値がプラスだと右側へ、マイナスだと左側へぼかします。
上下へぼかす値がプラスだと下側、マイナスだと上側へぼかします。
box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
ぼかす強さだけは負の指定はできません。0を指定すると以下のように影の輪郭がはっきりします。
box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.4);
ぼかしを広げる範囲は省略した場合は0が指定されます。
insetをつけると内側に影が表示されます。
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5), inset 0px -3px 6px -2px rgba(0, 0, 0, 0.3);
グラデーション同様にこちらもジェネレーターがありますので、試してみるとグラデーションの理解が深まります。
おまけでこのボックスシャドウを利用して押すとへこむボタンを作ってみました。
See the Pen push_btn_sample by JandSadaKo (@green555) on CodePen.
テキストシャドウ
text-shadow: 色,左右の値,上下の値,ぼかす範囲;
左右の値は、ボックスシャドウ同様、値がプラスだと右へ、マイナスだと左へぼかし、
上下の値は、プラスの値だと下へ、マイナスの値だと上へぼかします。
ぼかす範囲は省略可能です。
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);テキストシャドウは下のように背景が同系色で文字が見えにくい場合に使うと便利です。
テキストシャドウを指定すると以下のようになります。
文字がはっきりしました。
テキストシャドウもジェネレーターがありますので、試してみてください。
まだまだ便利なCSSや試したいCSSがたくさんあります。第４弾もお楽しみに！