ここでは、スタイルシートを使った影の効果を付けるプロパティと関数を３つご紹介します。
コンテンツ
box-shadow：ボックス要素に影を入れる
box-shadowは、ボックス要素に対して影を落とすときに使うプロパティです。
基本形はこうなります。
box-shadow: ヨコの位置 タテの位置 ぼかし距離 影の色;
「ヨコの位置」「タテの位置」以外は、省略が可能です。
ボタンで表示を切り替えてご覧ください。
See the Pen box-shadow01 by kenichi (@ken81) on CodePen.
CSS
.box{
box-shadow: 10px 10px 10px rgba(0,0,0,0.7);
}
右に10px、下に10px、影のぼかしを10px、それから、影を黒(0,0,0)にして透明度を0.7に設定してみました。
影の大きさを設定する
さらに、影の大きさを調整したいときは「影の色」の手前にもうひとつ値を追加します。
box-shadow: ヨコの位置 タテの位置 ぼかし距離 影の大きさ 影の色;
See the Pen box-shadow03 by kenichi (@ken81) on CodePen.
CSS
.box{
box-shadow: 10px 10px 10px 3px rgba(0,0,0,0.7);
}
先ほどの影の大きさを5px大きくしてみました。
影を内側に作る
さらに、「影の色」のあとに”inset”と入れると影が内側に入ります。
box-shadow: ヨコの位置 タテの位置 ぼかし距離 影の大きさ 影の色 inset;
See the Pen box-shadow02 by kenichi (@ken81) on CodePen.
CSS
.box{
box-shadow: 10px 10px 10px rgba(0,0,0,0.7) inset;
}
以上がbox-shadowプロパティです。box-shadowは四角い影を落とすと覚えておいてください。
text-shadow：テキストに影を入れる
先ほどのbox-shadowを使ってテキストに影を入れようとすると、こんな感じになります。
See the Pen box-shadow03 by kenichi (@ken81) on CodePen.
普通、テキストに影を入れたいときは、ボックスではなくてテキストそのものに入れたいですよね。そういうときに使うのが、text-shadowプロパティです。
text-shadow: ヨコの位置 タテの位置 ぼかし距離 影の色;
text-shadowプロパティは、box-shadowとは違って「影の大きさ」やinsetは使えませんので気をつけてください。
See the Pen text-shadow01 by kenichi (@ken81) on CodePen.
CSS
.text{
text-shadow: 10px 10px 10px rgba(0,0,0,0.7);
}
右に10px、下に10px、影のぼかしを10px、それから、影を黒(0,0,0)にして透明度を0.7に設定してみました。
filter:drop-shadow：
例えば、pngで作成した画像に影を落としたいとき、box-shadowだとボックスになってしまうし、
See the Pen box-shadow04 by kenichi (@ken81) on CodePen.
text-shadowはそもそも効かないし
See the Pen text-shadow02 by kenichi (@ken81) on CodePen.
透明部分を無視して影を落としたいなというときに使うのがfilter:drop-shadowです。これはプロパティではなくて関数です。使い方は下記の通りです。
filter:drop-shadow( ヨコの位置 タテの位置 ぼかし距離 影の色 );
See the Pen filter:drop-shadow01 by kenichi (@ken81) on CodePen.
CSS
.img{
filter:drop-shadow( 10px 10px 10px rgba(0,0,0,0.7));
}
関数なので、カッコ()の中に先ほどと同じ順番で値を入れていきます。rgbaのカラー設定のカッコ()もあるので、少しややこしいので気をつけてください。
drop-shadow関数を使うと、png画像だけでなくスタイルシートで作った三角形などにも影を落とし込むことができます。
See the Pen filter:drop-shadow02 by kenichi (@ken81) on CodePen.
いろいろ応用もできて便利そうですね。
以上がCSSを使って影を作る方法でした。
