【CSS】CSS3で実現するドロップシャドウ効果

css-drop-shadow

画像処理のソフトなどには、文字やオブジェクトに影をつける「ドロップシャドウ」という機能があります。

ボタンや写真などに「ドロップシャドウ」使うことで立体的に表現することができるのでよく使われる効果のひとつです。

画像処理のソフトなどで行う「ドロップシャドウ」効果をCSS3より登場した{box-shadow}を使用することでCSSのみで実現することができます。

「ドロップシャドウ」効果

css-drop-shadow-demo

{box-shadow}基本設定

{box-shadow}は、2~4つの長さの数値と色、「inset」のキーワードによって設定することができます。

基本的な設定例でぼかしの長さについては以下のようになります。

  • 1番目の値は、水平方向の影のオフセット距離
  • 2番目の値は、垂直方向の影のオフセット距離
  • 3番目の値は、ぼかし距離(値を0にるすとぼかしのないシャープな線になります。)
  • 4番目の値は、広がり距離
/* 基本的な設定例 */
.drop-shadow{
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
}

{box-shadow}の応用

before、after擬似要素を使うことで影の形を変えながらシャドウの効果をつけることができます。

{box-shadow}をbefore(またはafter)を指定した要素に設定することで親要素に影響を与えずに影のみCSSの効果を追加することができます。

例では、transformプロパティのrotate(回転)を組み合わせて{box-shadow}の影のみに回転をあたえています。

/* 例:transform:rotate による回転効果 */
.drop-shadow:before {
    height: 50%;
    width: 50%;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    transform: rotate(-3deg);
}

width、heightでのサイズの調整、top、leftなどで位置を調整することでさまざまな影のパターンを作ることができそうです。

「ドロップシャドウ」効果の作り方

基本と応用を用いて「ドロップシャドウ」の効果を再現例をご紹介します。

シャドウ(内側)

/* シャドウ(内側) */
.inset {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.7) inset;
}

シャドウ(奥行き)

/* シャドウ(奥行き) */
.perspective:before {
    bottom: 5px;
    box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
    height: 35%;
    left: 80px;
    max-height: 50px;
    max-width: 200px;
    transform: skew(50deg);
    transform-origin: 0 100% 0;
    width: 50%;
}
.perspective:after {
    display: none;
}

シャドウ(扇形)

/* シャドウ(扇形) */
.lifted:before, .lifted:after {
    bottom: 15px;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    height: 20%;
    left: 10px;
    max-height: 100px;
    max-width: 300px;
    transform: rotate(-3deg);
    width: 50%;
}
.lifted:after {
    left: auto;
    right: 10px;
    transform: rotate(3deg);
}

関連記事

【フォト】鬼岩寺1月28日「厄除け火渡り」

藤枝にある鬼岩寺。弘法大師が当地の人々を苦しめていた鬼を退治した話にその名前の由来があり、鬼が鋭い爪を研いだといわれる「鬼かき岩」が残っています。 毎年1月28日には厄除け火渡りの行事が行われています。 フォトギャラリー ※写真をクリックすると拡大表示します。 [...続きを読む

2017.01.28フォトギャラリー

ロリポップの簡単インストールで「WordPress」のインストールに失敗した!?

WEBサイトを構築・公開するために必要となるレンタルサーバー。数あるレンタルサーバーの運営サービスで、価格も手ごろなロリポップを利用する方も多いと思います。ロリポップではWordPressを簡単にインストールすることができますが、簡単インストールの途中で「インストールできませんで...続きを読む

2017.09.17WordPressレンタルサーバロリポップ

【WP】ワードプレスのカスタムメニューのカスタマイズ

先日ご紹介をしたWordPressのカスタムメニューの機能。出力されるタグをみるとクラス名が多く記述されているのがわかります。記述されているクラス名を使いCSSでメニューのデザイン、表示など変更する事も可能ですが、クラス名が多すぎて煩雑になりやすいので、今回はよりカスタマイズ...続きを読む

2015.08.19WordPress

新年あけましておめでとうございます。

あけましておめでとうございます。 昨年は格別 の御厚情を賜り、厚く御礼を申し上げます。 本年もデザインスタジオ・エフでは、皆様にご満足頂けるサービスを心がけていく所存でございますので、何とぞ昨年同様のご愛顧を賜わりますよう、お願い申し上げます。皆様のご健勝と皆様の...続きを読む

2018.01.04

MakeShop(メイクショップ)の販売代理店となりました

デザインスタジオ・エフではこのたび、GMOグループのMakeShop(メイクショップ)の販売代理店となりました。 月額無料から利用できるショッピングカート。MakeShopは、ネットショップの開店から運用までの一連の作業を効率化し、ネットショップオーナーをサポートします。 ...続きを読む

2015.03.24