CSS3のボックスシャドウを使って写真のフチの装飾をするサンプル作りました。【サンプルコード付き】

写真ブログcruzinで紹介している写真に背景画像で影をつけていますが、写真のブログとして作った「cruzin」では正方形型の写真用のフチ3パターンと長方形型の写真用のフチ3パターン、計6パターンのpng画像を背景画像としてあらかじめ用意しそれぞれにclass名をつけ指定しておきました。そしてフチをつけたい写真に先ほど用意したclassを指定することで写真のフチを表現していました。

写真ブログcruzin

使用している背景画像

classで背景画像を入れた写真

指定方法

HTML

<p class="bg03"><img src="images/miyakojima.jpg" width="788" height="430" alt="" /></p>

CSS

.bg03{
	background:url(images/bg_wide03.png) no-repeat top center;
	padding:22px 131px 70px; 
}

ただしこのような指定方法ですと写真のサイズを固定にしなければ背景にフチをつけることができないという欠点がありました。

今回はcss3のbox-shadowプロパティを使うことで同じような影の表現ができるというサイトがありましたので、CSS3のbox-shadowを使って写真フレームに影をつけ、めくれたようなエフェクトをつける表現を試してみました。

box-shadowについて

box-shadowはボックスに影をつけるプロパティーです。
このように水平方向の距離・ 垂直方向の距離・ ぼかし距離 ・ 広がり距離・ 影の色の4つの値で指定することができます。

値について

水平方向の距離(必須)・・正の値を指定すると右へ、負の値を指定すると左へ影が移動します
垂直方向の距離(必須)・・正の値を指定すると下へ、負の値を指定すると上へ影が移動します
ぼかし距離(任意)・・ぼけ方の強さを指定できます
広がり距離(任意)・・全方向への広がりの大きさを指定できます
影の色(必須)・・rgbaで色の指定することもできます。

また後ほどサンプルでも紹介しますが、カンマで区切ることで複数の影の設定を行うことや値に「inset」と追加するとボックスの内側に影をつけることもできます。

上記のソースで作成したbox-shadowのサンプル

CSS3のボックスシャドウを使って写真のフチの装飾をする

対応ブラウザ

サンプルは下記のバージョン環境で閲覧してください
・Internet Explorer 9以上
・Firefox 3.5 以上
・Chrome 1以上
・Safari 3 以上
・Opera 10.5 以上

枠の装飾

p{
	width:432px;
	border:5px solid #cfcfcf;
}

こちらはすべての写真共通です。

下にふわっとおちる影のサンプル

サンプルコード

HTML

<p class="shadow01"><img src="images/01.jpg" width="432" height="216" alt="" /></p>

CSS

.shadow01{
	/*影を入れる*/
	-webkit-box-shadow: 0 10px 8px -6px #8d8c8c;
	-moz-box-shadow: 0 10px 8px -6px #8d8c8c;
	 box-shadow: 0 10px 8px -6px #8d8c8c;
}

下方向のみ影を落としたいのでbox-shadowの一番目の値(水平方向の距離)は0に指定します。4番目の値(広がり距離)を負の方向に指定すると縮小した形で影の設定ができます。

めくれたような影のサンプル

HTML

<p class="shadow04"><img src="images/04.jpg" width="432" height="216" alt="" /></p>

CSS

.shadow04{
	position:relative;
}

.shadow02:after{
 	 z-index: -1;
	 position: absolute;
 	 content:'';
	 bottom: 10px;
 	 left: 10px;
  	 width: 70%;
  	 top: 80%;
 	 max-width:432px;
 	 background: #8d8c8c;
	 /*影を入れる*/
 	 -webkit-box-shadow: 0 15px 10px #8d8c8c;
 	 -moz-box-shadow: 0 15px 10px #8d8c8c;
	 box-shadow: 0 15px 10px #8d8c8c;
	 /*回転させる*/
	 -webkit-transform: rotate(-5deg);
	 -moz-transform: rotate(-5deg);
 	 -o-transform: rotate(-5deg);
	 -ms-transform: rotate(-5deg);
	 transform: rotate(-5deg);
}

めくれた影は疑似要素のafter要素を使って画像のうしろにposition: absoluteで配置することで再現してます。

またtransform:rotateプロパティを使用し、ポジションで指定したafter要素を少しだけ回転させ傾かせることでこのようなめくれたシャドウを表現しています。

トイカメラのような内側に影の入ったサンプル

HTML

<p class="shadow05"><img src="images/05.jpg" width="432" height="216" alt="" /></p>

CSS

.shadow05{
	position:relative;
}
.shadow05:after{
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*影を入れる*/
	box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5),
	inset 0 0 100px rgba(0, 0, 0, 0.2);
}

今度はafter要素を写真の上に重ねることでトイカメラ風の内側の影を表現しています。

box-shadowは「inset」値を指定することで内側の影に変更されます。

また今回はカンマで区切り、2枚の影を指定しています。この2枚の「ぼかしの距離・色の指定」の異なる影を重ねることでより立体的な影を表現しています。

※写真が入っていないとこんな影になっています

真ん中が浮いたような影のサンプル

HTML

<p class="shadow06"><img src="images/06.jpg" width="432" height="216" alt="" /></p>

CSS

.shadow06{
	position:relative;	
}

.shadow06:after{
	content:'';
	position:absolute;
	z-index:-1;
	top:50%;
	bottom:-5px;
	left:15px;
	right:15px;
	/*影を入れる*/
	-webkit-box-shadow:0 0 40px rgba(0,0,0,0.7);
	-moz-box-shadow:0 0 40px rgba(0,0,0,0.7);
	box-shadow:0 0 40px rgba(0,0,0,0.7);

	/*角丸にする*/
	-moz-border-radius:100px / 40px;
	-o-border-radius:100px / 40px;
	border-radius:100px / 40px;
}

after要素をborder-radiusを使って丸みをもたせることで写真の真ん中だけに影が落ちるように指定しています。

border-radiusプロパティは角丸の丸みを水平方向と垂直方向の半径のセットで表します。

※この水平方向と垂直方向の半径のセットは、スラッシュ（ / ）で区切り指定します。

上記のサンプルを載せたサンプルはこちら

先ほど紹介したサンプルのほかにちょっとだけカスタマイズしてできる影の装飾を紹介しています。

ほんの少しだけですがご自身の写真に置き換えてbox-shadowを使った影のスタイルシートを試してみてください。

その際、影の指定をしている疑似要素をご自身の写真サイズに合わせて、widthとpositionで影のサイズと位置を変更してアレンジしてみてください！

ただしIE7や8では今回の影はつきませんが、フチだけつけるようにしていれば「プログレッシブ・エンハンスメント」という考えもありますしいいのかな？

今回のサンプルは下記にアップしてあります。

http://www.html5-memo.com/sample/css3_shadow_sample/