CSS1行で、文字やテキストに影をつけることができる「shadow」を実装する方法をまとめてみました。
基本1：box-shadowを実装する方法
影を表現するためには、「box-shadow」を使用します。box-shadowは、指定した要素に影を付けるプロパティです。基本的な書き方は以下の通りです。
box-shadow: 水平方向のオフセット 垂直方向のオフセット 影のぼかし半径 影の広がり;
この要素に、影を付けるためには、以下のようにCSSを記述します。
.shadow-box {
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
画像に影をつける
See the Pen
box-shadow by りん@エンジニア (@rinblog0408)
on CodePen.
画像やタグ要素に影をつける場合は下記のCSSを記述します。
.shadow {
box-shadow: 10px 10px 0 #c3a400;
}
このように、1行で要素に影を付けることができます。水平方向のオフセットと垂直方向のオフセットは、影の位置を指定する値で、影のぼかし半径は影のぼかし具合を指定する値です。また、影の広がりは、値を大きくすることで影をより広く表現することができます。
基本2：text-shadowを実装する方法
最後に、テキストにshadowを付ける方法を紹介します。テキストにshadowを付ける場合は、「text-shadow」プロパティを使用します。例えば、以下のように書くことで、テキストに影を付けることができます。
.shadow-text {
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
このように、テキストにも1行で影を付けることができます。
文字に影をつける
See the Pen
shadow-text by りん@エンジニア (@rinblog0408)
on CodePen.
文字にズラし影をつける場合は下記のCSSを記述します。
.shadow {
text-shadow: 4px 4px 0 #c3a400;
}
応用1：複数のshadowを表現する
影を複数表現することもできます。例えば、以下のように書くことで、要素に2つの影を付けることができます。
.shadow-box {
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3), -5px -5px 5px rgba(0, 0, 0, 0.3);
}
このように、影を表現する際には「,（カンマ）」で区切って複数の影を指定します。
複雑な形の画像やタグ要素に影をつける
See the Pen
filter:drop-shadow by りん@エンジニア (@rinblog0408)
on CodePen.
複雑な形の画像やタグ要素に影をつける場合は下記のCSSを記述します。
.shadow {
filter: drop-shadow(10px 10px 0 #c3a400);
}
応用2：blurとspreadを使った表現方法
影のぼかし具合と影の広がりを調整することで、影の表現方法をカスタマイズすることもできます。例えば、以下のようにblurとspreadを使用することで、影の表現方法を変えることができます。
.shadow-box {
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}
.shadow-box.blur {
box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.3);
}
.shadow-box.spread {
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3), 0 0 10px 5px rgba(0, 0, 0, 0.3);
}
blurは、影のぼかし具合を調整するための値で、spreadは影の広がりを調整するための値です。また、影の表現方法を変えるために、複数のshadowを組み合わせることもできます。
まとめ
CSS1行で、文字やテキストに影をつけることができる「shadow」を実装する方法をまとめました。複数の影を表現することや、blurとspreadを使った表現方法、テキストにshadowを付ける方法など、様々な方法があるのでぜひ試してみてください。
▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ
