このページの本文へ

DESIGN 菊池 崇の実践!CSS3道場 ― 第3回

box-shadowを極めて「Mac風UI」を作る!

2011年02月16日 11時00分更新

菊池 崇

  • この記事をはてなブックマークに追加
本文印刷

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を組み合わせてフィルターを表現している。

  1. #CCC 1px 1px 2px
  2. inset rgba(214,165,119, .3) 0 0 240px 200px
  3. 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');}
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く