【初心者でもわかる】box-shadow以外で影を付ける方法

#どうも7noteです。影はbox-shadowやtext-shadow以外でも付けることができます！

影を付けるなら以下の2つのプロパティが一般的です。

「一般的な影のつけ方」
・ box-shadow
・ text-shadow

これ以外でも影を再現する方法がいくつかあるので紹介。

シンプルな影を作る

style.css

.card {
  color: #fff;                      /* 文字色を白に指定 */
  background: #549DE7;              /* 背景色を青に指定 */
  border-bottom: 5px solid #356D8F; /* 下の影を設定 */
  border-right: 3px solid #356D8F;  /* 右の影を設定 */
  padding: 50px;                    /* 余白を指定 */
}

※rgba指定して、半透明の影にすることも可能。（rgba(0,0,0,0.5)等）

ぼやっとした影を付ける

style.css

.card {
	color: #fff;
	background: #549DE7;
	padding: 50px;
	position: relative;
}

.card::after {
  content: '';        /* 疑似要素に必須 */
  display: block;     /* ブロック要素にする */
  position: absolute; /* 相対位置にする */
  z-index: -1;        /* 背面に移動させる */
  top: 0;             /* 上から0pxの位置に指定 */
  left: 0;            /* 左から0pxの位置に指定 */
  width: 100%;        /* 親要素と同じ幅にする */
  height: 100%;       /* 親要素と同じ高さにする */
  background-color: rgb(200, 200, 200);    /* 影の色をグレーに指定 */
  filter: blur(15px);                      /* フィルターでぼかす */
  transform: translateY(10px) scale(1.05); /* 位置とサイズを調整する */
  mix-blend-mode: multiply;                /* 乗算で重ねる */
}

※IE非対応

png画像やsvgの形に合わせた影を付ける

style.css

img {
  filter: drop-shadow(5px 5px 8px #666);  /* 画像に合った影を指定（左右の位置 上下の位置 広がり 色） */
}

※jpgではなく、透過させたpngやgif、SVGなどに使用できます。

テキストを立体に見せかける影

index.html

<h2 class="text">TEXT</h2>

style.css

.text {
  font-size: 3em;      /* 程よい大きさに指定 */
  position: relative;  /* 基準位置とする */
  text-align: center;  /* 文字を中央揃えにする */
}

.text::before {
  content: "TEXT";    /* 影にするテキストを指定 */
  font-size: 0.8em;   /* 少し小さくするor大きくする */
  letter-spacing: 8px;/* 文字間を広げる（微調整必要） */
  color: #ccc;        /* 文字色を薄いグレーに指定 */
  opacity: .7;        /* 透明度を0.7に指定 */
  position: absolute; /* 相対位置にする */
  bottom: 3px;        /* 下から3pxの位置に指定（微調整必要） */
  left: 50%;          /* 左から50%の位置に指定 */
  transform: translateX(-40%) skew(-45deg);  /* 表示位置と傾斜を指定（微調整必要） */
  z-index: -1;        /* 背面に移動 */
}

過去にこの方法について解説しているのでこちらもどうぞ。

まとめ

box-shadowはもう古い、なんて記事があるくらい新しい方法での影の再現の仕方が出ています。
影だからbox-shadow、ではなく適材適所で影も選択する必要がありそうですね。

参考：https://ics.media/entry/200406

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ