box-shadowで古びた写真を
サンプル5でも紹介したように、box-shadowをうまく使うと、「shadow」という単語からイメージされる以上の効果が得られる。サンプル6は写真画像にbox-shadow を複数指定することで、まるで古びた写真のようなフィルター効果を適用したものだ。
サンプル6の実行画面。box-shadowをうまく使うと、こうしたフィルター効果も作れる
以下の2枚の写真はどちらもimg要素で同じ画像を表示しているが、右側の写真にはbox-shadowでフィルター効果を付けている。CSSのマスクなどのプロパティは一切利用せず、box-shadowだけでフィルターを表現している。
■サンプル6[HTML]
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>box-shadow 古い写真 | ASCII 菊池崇のCSS3実践道場</title> </head> <body> <figure id="pic-before"> <img src="santa-monica.jpg" alt="写真 加工前 サンタモニカ" /> </figure> <figure id="pic-after"> <img src="santa-monica.jpg" alt="写真 加工後 サンタモニカ" /> </figure> </body> </html>
■サンプル6[CSS]
html { background : url(bg_main.jpg); } figure{ display : inline-block; border : 5px solid #fff; margin-bottom : 50px; } figure img { vertical-align : middle; } figure#pic-after { -webkit-box-shadow : #CCC 1px 1px 2px,inset rgba(214,165,119, .3) 0 0 240px 200px, inset rgba(0,0,0,.3) 0 0 100px; -moz-box-shadow : #CCC 1px 1px 2px,inset rgba(214,165,119, .3) 0 0 240px 200px, inset rgba(0,0,0,.3) 0 0 100px; box-shadow : #CCC 1px 1px 2px,inset rgba(214,165,119, .3) 0 0 240px 200px, inset rgba(0,0,0,.3) 0 0 100px; } figure#pic-after img { position : relative; z-index : -1; }
ポイントは、img要素に対してz-index:-1を指定しているところだ。サンプル6ではimg要素を包むfigure要素に対してbox-shadowを適用している。img要素のz-indexに-1を指定すると、box-shadow（figure要素）の下のレイヤーにimg要素が移動するので、画像の上にbox-shadowが重なり、フィルターのような効果が得られるわけだ。
figure#pic-after img { position : relative; z-index : -1; }
box-shadowの指定も工夫している。サンプル6では以下の3つのbox-shadowを組み合わせてフィルターを表現している。
- #CCC 1px 1px 2px
- inset rgba(214,165,119, .3) 0 0 240px 200px
- inset rgba(0,0,0,.3) 0 0 100px
1つ目の値は、写真の白いふち（figure要素）に対して少し影を付けて、写真を立体的に見せている。
2つ目の値は、写真全体にマスクをかけている。
3つ目の値は、写真の縁から内側にかけて少し黒い影を付けて、色が抜けた感じを表現している。
コンディショナル・クラス名によるIEへの対応
box-shadowのように古いIEがサポートしていないCSSプロパティを利用する場合、従来はコンディショナルコメントやハックを使って対応してきた。
だが、コンディショナル・コメントよりもおすすめなのが、「コンディショナル・クラス名」を使うテクニックだ。従来の方法に比べてHTTPリクエストを減らせるのがメリットで、以下のように利用する。
■コンディショナル・コメントの記述方法
<!--[if IE 6]>
<link rel=”stylesheet” href=”ie6.css” type=”text/css” media=”screen” />
<![endif]-->
■コンディショナル・クラス名の記述方法
<!--[if IE 7 ]> <body class="index ie7"> <![endif]--> <!--[if IE 8 ]> <body class="index ie8"> <![endif]--> <!--[if IE 9 ]> <body class="index ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <body class="desc"> <!--<![endif]-->
たとえば、IE6～IE8向けにfilterプロパティを適用する場合、以下のようなCSSを記述する。
.i6 figure, .ie7 figure { filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40');} .ie8 figure { -ms-filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40');}
