CSS

CSSを使って影を作る方法

ここでは、スタイルシートを使った影の効果を付けるプロパティと関数を3つご紹介します。

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を使って影を作る方法でした。

最近の記事

  1. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  2. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  3. CSS

    CSS|中央寄せが効かないときは・・・
  4. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  5. CSS

    要素の配置が簡単に決まるFlexboxの使い方
PAGE TOP