Box Shadowのエフェクトサンプル & 便利な素材まとめ

  • Posted on
  • Category : Material
Box Shadowのエフェクトサンプル & 便利な素材まとめ

今更な内容で特に目新しいものがあるわけではありませんが、自分用で一覧化したものが欲しかったので備忘録。CSSのbox-shadowを使用して実装するエフェクトサンプルとデザイン制作時にシャドウエフェクトを付けたい時に便利な素材セットそれぞれ10種類ずつです。

Box Shadowのエフェクトサンプル & 便利な素材まとめ 目次

  1. CSSのbox-shadowで実装したエフェクトサンプル
  2. デザイン制作時に便利なシャドウエフェクト素材

1. CSSのbox-shadowで実装したエフェクトサンプル

以下はいずれも画像は使わずにCSSのbox-shadowを使用してシャドウエフェクトを実装しているサンプルで、単純にシャドウを付けたもの、内側に付けたもの、要素が浮かんでいるように見せるものなど全10種類あります。
HTMLはEffect 10以外は全てdiv要素ひとつで、共通のスタイルとして以下をCSSで指定しています。

CSS

div {
	width: 500px;
	height: 200px;
	background-color: #fff;
}

それぞれ実際の表示は、以下デモページで確認できます。

Effect 01

Effect 01

CSS

div {
	box-shadow: 0 0 15px rgba(0,0,0,.3);
}

Effect 02

内側にシャドウエフェクトを付加したもので、画像などと組み合わせればトイカメラ風みたいな表現もできます。

Effect 02

CSS

div {
	box-shadow: inset 0 0 15px rgba(0,0,0,.3);
}

Effect 03

Effect 03

CSS

div {
	box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);
}

Effect 04

Effect 04

CSS

div {
	position: relative;
}
div::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 15px;
	right: 15px;
	z-index: -1;
	content: '';
	box-shadow: 0 10px 10px rgba(0,0,0,.3);
	border-radius: 100px / 15px;
}

Effect 05

コンテンツが浮かんでいるような表現ができます。

Effect 05

CSS

div {
	position: relative;
}
div::after {
	position: absolute;
	bottom: 10px;
	left: 25px;
	z-index: -1;
	content: '';
	width: 450px;
	height: 10px;
	box-shadow: 0 40px 25px rgba(0,0,0,.5);
	border-radius: 200px / 5px;
}

Effect 06

Effect 06

CSS

div {
	position: relative;
}
div::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;
	right: 10px;
	z-index: -1;
	content: '';
	box-shadow: 0 0 20px rgba(0,0,0,.5);
	border-radius: 100px / 20px;
}

Effect 07

Effect 07

CSS

div {
	position: relative;
}
div::after {
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 0;
	right: 0;
	z-index: -1;
	content: '';
	box-shadow: 0 0 20px rgba(0,0,0,.5);
	border-radius: 30px;
}

Effect 08

コンテンツが紙のようにめくれているようなシャドウエフェクトを付加したもの。

Effect 08

CSS

div {
	position: relative;
}
div::before,
div::after {
	position: absolute;
	bottom: 10px;
	z-index: -1;
	content: '';
	width: 50%;
	height: 50%;
	box-shadow: 0 10px 15px rgba(0,0,0,.5);
}
div::before {
	left: 10px;
	-webkit-transform: rotate(-4deg);
	transform: rotate(-4deg);
}
div::after {
	right: 10px;
	-webkit-transform: rotate(4deg);
	transform: rotate(4deg);
}

このサンプルでは::before::afterの2つの擬似要素を使用していますが、どちらかを削除すれば片方だけめくれているような見栄えにできます。
他にもそれぞれの位置をわざとずらして配置したりすることで、片方は大きくめくれて、もう片方は少しだけめくれている感じの見栄えも各数値を変更するだけで表現できます。

Effect 09

斜め上から光が差し込んでいるようなシャドウエフェクトを実装できます。

Effect 09

CSS

div {
	position: relative;
}
div::after {
	position: absolute;
	bottom: 20px;
	right: 55px;
	z-index: -1;
	content: '';
	width: 50%;
	height: 100px;
	box-shadow: 100px 0 10px 15px rgba(0,0,0,.3);
	-webkit-transform: skew(-40deg);
	transform: skew(-40deg);
}

Effect 10

Effect 10

これまでのとは少し違うタイプで、画像右のようにブラウザ上部にシャドウを付けることでページに奥行きがあるように見せるものです。

CSS

body:before {
	position: fixed;
	top: -10px;
	left: 0;
	z-index: 100;
	content: '';
	width: 100%;
	height: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,.5);
}

実際の表示はデモページのブラウザ上部で確認できます。

目次へ

2. デザイン制作時に便利なシャドウエフェクト素材

以下はデザイン制作時などでシャドウエフェクトを使用したいという時に便利な素材です。
大体どれも似たような感じなので種類が豊富なものを覚えておいたり幾つかダウンロードしておけばいい気もしますが、全部で10セットあり、形式は一部をのぞいてPSD形式で配布されています。

※以下で紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。

dropshadow.psd

dropshadow.psd

※8種類

6 Paper Shadow Photoshop Effects

6 Paper Shadow Photoshop Effects

※6種類

10 Box Shadow Effects

10 Box Shadow Effects

※10種類

Box Shadow Pack

Box Shadow Pack

※6種類

Three Box Shadows

Three Box Shadows

※3種類

Collection of Box Shadows

Collection of Box Shadows

※8種類 形式:EPS

17 content box shadows

17 content box shadows

※17種類

Box Shadow Set

Box Shadow Set

※6種類

Realistic Box Shadows

Realistic Box Shadows

※8種類

Box Shadow PSD

Box Shadow PSD

※20種類

目次へ

Back to Top

Box Shadowのエフェクトサンプル & 便利な素材まとめ

Box Shadowのエフェクトサンプル & 便利な素材まとめ

/ Material

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。