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.09.07

HTML・CSS

animation-fill-modeの指定について

animation-fill-modeプロパティはCSSアニメーション実行後、対象要素にどのようなスタイルを適用するか設定します。animation-fill-…

2021.07.06

HTML・CSS

background-imageプロパティを利用した高さ可変の三角形

borderプロパティで三角形を作成した場合、高さを可変にすることができません。そこで、background-imageプロパティのlinear-gradien…

2021.09.13

HTML・CSS

nth-childとlast-childの複合条件

デモページはこちら 3カラムで複数行のコンテンツの両側にCSSで角丸を設定します。コンテンツ数は可変の前提で、部分的に2カラムや1カラムになった時のパターンも考…

2020.08.26

HTML・CSS

Google Fontsの使い方

Google Fontsのサイトで使用したいフォントを全て選択します。複数のフォントも一度に読み込めます。Google Fonts Embedタブの<li…

2023.02.13

HTML・CSS

隣接セレクタ、間接セレクタ、直下セレクタについて

隣接セレクタ、間接セレクタ、直下セレクタの動作を確認します。デモページはこちら 隣接セレクタ 間接セレクタ 直下セレクタ A + B A ~ B A > …

上に戻る