iPentec.com  /  Doc  /  CSS  /  CSS ドロップシャドウ

目次

ブレンドモードを設定した box-shadow の影を作成する - CSS

ブレンドモードを設定した box-shadow の影を作成するコードを紹介します。

概要

こちらの記事ではCSSの box-shadow プロパティを利用して枠に影を描画するコードを紹介しました。 box-shadow の影にブレンドモードを設定して描画するコードを紹介します。

単純な実装

コード

下記のCSS,HTML コードを記述します。
CssDropShadowBlendMode.css
body {
  background: url('./back.jpg');
}

.Frame {
  text-align: left;
  margin: 2rem auto 0 auto;
  background-color: #0022c3;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  width: 420px;
  box-shadow: 0 0 24px #4cff00;
  mix-blend-mode: overlay;
}
CssDropShadowBlendMode.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="CssDropShadowBlendMode.css" />
</head>
<body>
  <div class="Frame">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    6<br />
    7<br />
    8<br />
    9<br />
    10<br />
  </div>
</body>
</html>

解説

box-shadow プロパティで枠の影を設定します。mix-blend-mode でブレンドモードを設定します。上記のコードでは "overlay" を設定しオーバーレイで枠を描画します。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。影はオーバーレイで描画できていますが、 枠の内部もオーバーレイモードで合成されてしまっています。

ブレンドモードを設定して影を描画する

先のコードでは枠全体がオーバーレイのブレンド表示になってしまうため、影だけをブレンド表示する場合は、 同じ位置に通常モードで同じ枠を重ねて描画します。同じ位置に重ねて枠を描画するため、position プロパティを absolute に設定し絶対座標で 位置を指定します。

コード

下記のCSS、HTMLファイルを作成します。
CssDropShadowBlendMode.css
body {
  background: url('./back.jpg');
}

.Frame {
  text-align: left;
  margin: 2rem auto 0 auto;
  background-color: #FFFFFF;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  width: 420px;
  mix-blend-mode: normal;

  z-index:1;
  position:absolute;
  top:46px;
  left:120px;
}

.ShadowFrame {
  text-align: left;
  margin: 2rem auto 0 auto;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  background-color: #0022c3;
  box-shadow: 0 0 24px #4cff00;
  mix-blend-mode: overlay;
  width: 420px;
  z-index: 0;
  position: absolute;
  top: 46px;
  left: 120px;
}
CssDropShadowBlendMode.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="CssDropShadowBlendMode.css" />
</head>
<body>
  <div class="Frame">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    6<br />
    7<br />
    8<br />
    9<br />
    10<br />
  </div>

  <div class="ShadowFrame">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    6<br />
    7<br />
    8<br />
    9<br />
    10<br />
  </div>
</body>
</html>

解説

2つの枠を記述します。枠のサイズと内容も同じで記述し枠の大きさを一致させます。
1つの枠(class="ShadowFrame ")は、mix-blend-mode プロパティで overlay を設定しオーバーレイモードでの合成モードに設定します。また、 box-shadow プロパティを設定し枠の影を描画します。
もう一方の枠(class="Frame")は、通常の描画モードに設定します。また、box-shadowは設定せず影の描画はしません。
2つの枠の position プロパティをabsolute に指定し枠の表示位置を絶対座標に設定します。 また、top,left には同じ位置を設定して 2つの枠が完全に重なる状態で表示します。

表示結果

上記のHTMLファイルを実行します。下図のページが表示されます。 枠の影が描画され、オーバーレイの合成モードで影が描画されていることが確認できます。

補足 : タグを入れ子にして親子関係がある場合の表示結果

先のコードでは同じ内容のコンテンツを2つ作成して重ねているためHTML的にはあまりきれいではないコードです。
以下のHTMLコードのように入れ子にして記述しても動作するように見えますが、期待した表示にはなりません。

コード

CssDropShadowBlendModeNested.css
body {
  background: url('./back.jpg');
}

.Frame {
  text-align: left;
  margin: 0 auto 0 auto;
  background-color: #FFFFFF;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  width: 420px;
  mix-blend-mode: normal;
}

.ShadowFrame {
  text-align: left;
  margin: 2rem auto 0 auto;
  padding: 0 0 0 0 ;
  background-color: #4cff00;
  box-shadow: 0 0 24px #4cff00;
  width: 420px;
  mix-blend-mode: overlay;
}
CssDropShadowBlendModeNested.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="CssDropShadowBlendModeNested.css" />
</head>
<body>
  <div class="ShadowFrame">
    <div class="Frame">
      1<br />
      2<br />
      3<br />
      4<br />
      5<br />
      6<br />
      7<br />
      8<br />
      9<br />
      10<br />
    </div>
  </div>
</body>
</html>

解説

2つの枠をネストして記述します。外側の枠はShadowFrameクラスを指定し、オーバーレイモードでブレンドして描画します。 内側の枠はFrame クラスを指定し、通常モードで描画します。
先のHTMLと同じ結果が得られるか確認します。

表示結果

上記のHTMLをWebブラウザで表示します。下図のページが表示されます。内側の枠は通常モードで描画する設定ですが、透過の無い通常モードの描画ではなく、 親の要素のdiv枠のShadowFrameクラスの設定が反映されており、オーバーレイの描画が反映されてしまっていることが確認できます。

参考:疑似要素を利用する場合

外側の枠がない例

コード

下記ファイルを作成します。
CssDropShadowBlendModePseudoElement.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="CssDropShadowBlendModePseudoElement.css" />
</head>
<body>

    <div class="Frame">
      1<br />
      2<br />
      3<br />
      4<br />
      5<br />
      6<br />
      7<br />
      8<br />
      9<br />
      10<br />
    </div>

</body>
</html>
CssDropShadowBlendModePseudoElement.css
body {
  background: url('./back.jpg');
}

.Frame {
  text-align: left;
  margin: 2rem auto 0 auto;
  background-color: #FFFFFF;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  position: absolute;
  top: 46px;
  left: 120px;
  width: 420px;
}

  .Frame::after {
    content: "";
    width: 100%;
    height: 100%;
    mix-blend-mode: overlay;
    background-color: #ffd11c;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    box-shadow: 0 0 24px #ffd11c;
  }

解説

HTMLファイルは先の例と同じ構造です。Frameクラスも先の例と同様の設定です。
影の枠を .Frame::after クラスで定義します。
position: absolute;を設定し座標を絶対座標にして、width:100% height:100% top:0 bottom:0 を設定すると、コンテンツの枠(Frameクラス)と同じ大きさで重なります。
z-index: -1;を設定しコンテンツの枠(Frameクラス)の下に配置します。

mix-blend-mode: overlay; box-shadow: 0 0 24px #e2ff28; を設定して影の設定を入れます。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。影の部分がオーバーレイ表示できています。

外側の枠がある例

コード

下記ファイルを作成します。
CssDropShadowBlendModePseudoElementWrap.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="CssDropShadowBlendModePseudoElementWrap.css" />
</head>
<body>

  <div class="WrapFrame">
    <div class="Frame">
      1<br />
      2<br />
      3<br />
      4<br />
      5<br />
      6<br />
      7<br />
      8<br />
      9<br />
      10<br />
    </div>
  </div>

</body>
</html>
CssDropShadowBlendModePseudoElementWrap.css
body {
  background: url('./back.jpg');
}

.WrapFrame {
  position: relative;
  margin: 1rem 2rem 0 4rem;
  width: 480px;
}

.Frame {
  text-align: left;
  margin: 2rem auto 0 auto;
  background-color: #F0F0F0;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  width: 100%;
  z-index: 1;
  box-sizing: border-box;
}

  .Frame::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #FF0000;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    mix-blend-mode: overlay;
    box-shadow: 0 0 24px #FF0000;
  }

解説

HTMLファイルの構造がこれまでの例と若干変わり、コンテンツの枠の外側をclass="WrapFrame" のdivタグで囲む構造になります。 枠の幅は外側のWrapFrameで指定します。
.Frameクラスは width:100% を指定し外側の枠の幅と同じ幅とします。

影の枠を .Frame::after クラスで定義します。
position: absolute;を設定し座標を絶対座標にして、width:100% height:100% top:0 bottom:0 を設定すると、コンテンツの枠(Frameクラス)と同じ大きさで重なります。
z-index: -1;を設定しコンテンツの枠(Frameクラス)の下に配置します。

mix-blend-mode: overlay; box-shadow: 0 0 24px #FF0000; を設定して影の設定を入れます。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。影の部分がオーバーレイ表示できています。

著者
とりっち
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

関連するページ

最終更新日: 2022-10-26
作成日: 2021-02-04
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.