2021.07.06

HTML・CSS

Photoshopのドロップシャドウをbox-shadowプロパティで適用

Photoshopのレイヤースタイルで作成したドロップシャドウを、box-shadowプロパティで適用します。
デモページはこちら

box-shadowプロパティは、水平方向の距離→垂直方向の距離→ぼかしの距離→広がりの距離→影の色→insetの順に指定します。水平方向の距離と垂直方向の距離は省略不可です。他のプロパティは省略できますが、省略した場合は初期値が適用されます。

【初期値】
ぼかしの距離:0
広がりの距離:0
影の色:ブラウザのユーザーエージェントによる
inset:指定すればボックスの内側に影、指定しなければボックスの外側に影

Photoshopのレイヤースタイルで作成したドロップシャドウの値に合わせて、box-shadowプロパティの値を指定します。

PhotoshopCSS
角度:90度、距離:3px水平方向の距離:0、垂直方向の距離:3px
サイズ:7pxぼかしの距離:7px
スプレッド:0%広がりの距離:0
影の色:黒、不透明度:35%影の色:rgba(0, 0, 0, 0.35)
.div01 {
	margin: 0 0 1em;
	padding: 40px;
	background-color: #fff;
	box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.35);
}

垂直方向ではなく右下方向へドロップシャドウを適用する場合は、以下のように水平方向の距離を設定します。

.div02 {
	margin: 0 0 1em;
	padding: 40px;
	background-color: #fff;
	box-shadow: 3px 3px 7px 0 rgba(0, 0, 0, 0.35);
}

なお、box-shadow: none;を指定すればドロップシャドウを打ち消すことができます。

関連記事

2020.10.15

HTML・CSS

マウスオーバー時にCSSのtransitionプロパティを実装する場合の注意点

デモページはこちら マウスオーバー時にCSSのtransitionプロパティを実装する場合の注意点です。以下のhtml構造でテストします。 .photo01 a…

2021.10.04

HTML・CSS

複数行のテキストの左側を縦のボーダーで装飾

デモページはこちら 複数行のテキストの左側を縦のボーダーで装飾します。CSSはborder-leftの場合とheightを設定した疑似要素beforeをabso…

2020.12.28

HTML・CSS

CSSロードアニメーションの実装【円の一部分の色を回転】

デモページはこちら 円の一部分の色が回転する動作のCSSロードアニメーションを実装します。ローダーの見た目は全てCSSで実装するため、svgは使用しません。 h…

2020.08.23

HTML・CSS

マウスオーバー時にCSSのみでフェードイン・フェードアウトを実装する場合の注意点

マウスオーバー時にCSSのみでフェードイン・フェードアウトを実装する場合、display: none;で非表示、マウスオーバー時にdisplay: block;…

2024.08.15

HTML・CSS

box-decoration-breakでテキストの背景色を設定

box-decoration-breakプロパティでテキストに背景色を設定します。複数行の文字に対応でき、改行も問題ありません。デモページはこちら 以下のhtm…

上に戻る