【CSS入門】box-shadowで目指せ影マスター

この記事ではCSSのbox-shadowプロパティについて解説します。

box-shadowとは？

要素に影（ドロップシャドウ）をつけます。

CSS

box-shadow: 水平方向の距離 垂直方向の距離;

box-shadow詳細

基本的な書き方

影の基本の向きは右方向と下方向になるので、以下の場合、右に15px、下に10px伸びた影ができます。

HTML

<div class="box"></div>

CSS

.box{
  width: 250px;
  height: 250px;
  background: #fff;
  box-shadow: 15px 10px; 
}

右ではなく左に影を伸ばしたいときと、下ではなく上に影を伸ばしたいときはマイナスの値を指定します。

CSS

.box{
  box-shadow: -15px -10px; 
}

影の色を指定

デフォルトでは影の色は黒ですが、色を変更したい場合は、半角スペースをあけて色名やカラーコードで色を指定します。

CSS

box-shadow: 水平方向の距離 垂直方向の距離 影の色;

以下の場合、右と下に「カラーコード#00a3d3」の10pxの影ができます。

CSS

.box{
  box-shadow: 10px 10px #00a3d3;
}

色は透明色にもできるrgbaでの指定もできます。

CSS

.box{
  box-shadow: 10px 10px rgba(0, 163, 211, 0.3);
}

影をぼかす

影をぼかす場合は、垂直方向の距離のあとに、ぼかし距離(ぼかし度合い)をpxで指定します。

CSS

box-shadow: 水平方向の距離 垂直方向の距離 ぼかし距離;

以下の場合、10pxの影に20pxのぼかしを加えています。

ぼかし距離のあとに色を指定すれば、色の変更をしながらぼかすことができます。

CSS

.box{
  box-shadow: 10px 10px 20px #00a3d3;
}

影の広がりを調整

影の広がりを調整する場合は、ぼかし距離のあとに広がり距離をpxで指定します。

CSS

box-shadow: 水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離;

作った影を拡大したり縮小したりするので、以下のようにマイナスの値を指定すると、影が縮小します。

広がり距離のあとに色を指定すれば、色の変更をしながら影の広がりを調整することができます。

CSS

.box{
  box-shadow: 10px 10px 20px -5px;
}

影を内側にかける

今までは影は要素の外側にかかっていましたが、内側にかける方法があります。

値の1番最後に「inset」と書くだけです。

CSS

box-shadow: 水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 inset;

以下の場合、広がり距離を省略した状態で、要素の内側の右と下に10pxの影ができます。

CSS

.box{
  box-shadow: 10px 10px 20px #00a3d3 inset;
}

反対方向に影を伸ばしたいときはマイナスの値を指定します。

CSS

.box{
  box-shadow: -10px -10px 20px #00a3d3 inset;
}

まとめ

マテリアルデザインの登場により要素にふんわりと影をつける機会が増えましたので、box-shadowとtext-shadowプロパティはしっかりと理解して使いこなせるようにしておきましょう。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。