フリーランス・個人事業主として独立を目指すデザイナー、副業を始めたいデザイナーを応援します! 自立支援に役立つ初心者向けWordPress情報も随時アップします!

CSSで画像や文字に影をつける方法

読了目安時間は約 4 分です。

今回は、CSSで画像や文字などの要素に影をつける方法(ドロップシャドウ)をご紹介します。

目次

要素に影をつけるCSS【box-shadow】

CSSで影をつけるのによく使われるのがbox-shadowです。要素のボックス全体(ボーダーとその内側)に対して影をつけます。

.sample {
 box-shadow:(横に影をつける)px (縦方向に影をつける)px (ぼかし量)px (影の拡大)px  rgba(影の色と不透明度) 内側指定;
}

例えば

.sample {box-shadow: 2px 2px 4px -2px rgba(0,0,0,0.2) inset}

というように記述します。

影を同時に複数つけることも可能です。

.sample {
  box-shadow: 2px 2px 2px  #aaa,
  3px 3px 5px rgba(255,255,255,0.7) inset;
}

で普通に影をつけつつ、内側に白い影をつけてハイライトを表現できます。

気をつけないといけないのは、要素全体に影がつくので文字だけに影をつけられません。
また、透明PNGやSVGで透明部分を無視して影をつけることができません。
ボックス全体、つまり透明部分を含めて影がかかってしまいます。

文字に影をつけるCSS【text-shadow

文字だけに影をつけたいときはtext-shadowを使います。テキストだけに影をつけることができます。

.sample {
text-shadow: (横に影をつける)px  (縦方向に影をつける)px (ぼかし量)px  rgba(影の色と不透明度) ;
}

例えば

.sample {text-shadow: 2px 2px 3px rgba(0,0,0,0.2)}

という感じです。

こちらも影を同時に複数つけることが可能です。

画像の形に合わせた影をつけられる【filter: drop-shadow()】

透明PNGやSVGで、透明部分を無視して画像の輪郭に沿った影をつけたいときはfilter: drop-shadow()です。

.sample{
        filter: drop-shadow((横に影をつける)px  (縦方向に影をつける)px (ぼかし量)px rgba(影の色と不透明度) );
}

例えば

.sample { filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5))}

という風に。

一見すると万能そうなfilter: drop-shadowですが弱点もあります。

IEでは使えませんし、insetも使えない(内側に影をつけられない)ので、box-shadowと使い分けが必要です。

以上、CSSで影をつける方法あれこれでした。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる