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

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

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

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

シンプルな影を作る

style.css

.card{color:#fff;/* 文字色を白に指定 */background:#549DE7;/* 背景色を青に指定 */border-bottom:5pxsolid#356D8F;/* 下の影を設定 */border-right:3pxsolid#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(5px5px8px#666);/* 画像に合った影を指定（左右の位置 上下の位置 広がり 色） */}

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

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

index.html

<h2class="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;/* 背面に移動 */}