box-shadowでページカールエフェクトを実現する
最後におまけとして、サンプル6の写真にページカールエフェクトを付けるサンプルを紹介しよう。ページカールエフェクトとは、写真の両下端に影を置き、写真が少しめくれたように見える効果だ。サンプル7ではbox-shadowプロパティに加えて、CSS3のtransformプロパティを利用してページカールエフェクトを実装している。
サンプル7。transformを使って影の形を調整し、写真がめくれたように見せている
■サンプル7[HTML]
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>box-shadow ページカールエフェクト | ASCII 菊池崇のCSS3実践道場</title> </head> <body> <figure> <img src="santa-monica.jpg" alt="写真 サンタモニカ" /> </figure> </body> </html>
■サンプル7[CSS]
html { background: url(bg_main.jpg); } figure { position: relative; display : inline-block; border : 5px solid #fff; } figure img { vertical-align : middle; } figure:before, figure:after { content:""; position:absolute; z-index:-1; bottom:15px; left:10px; width:50%; height:20%; -webkit-box-shadow : 0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow : 0 15px 10px rgba(0, 0, 0, 0.7); box-shadow : 0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform : rotate(-5deg); -moz-transform : rotate(-5deg); -o-transform : rotate(-5deg); transform : rotate(-5deg); } figure:after{ right:10px; left:auto; -webkit-transform : rotate(5deg); -moz-transform : rotate(5deg); -o-transform : rotate(5deg); transform : rotate(5deg); }
◆
CSS3というと、どうしてもtransitionのような派手なプロパティが取り上げられることが多い。だが、実際の制作案件で活躍するのはむしろbox-shadowのようなシンプルなプロパティだ。まずはbox-shadowや前回のtext-shadowをしっかりと学ぶことをぜひともオススメする。それだけでも、Webデザインの幅はぐっと広がるはずだ。
今回紹介した以外にも、box-shadowを使ったすばらしいサンプルやテクニックはたくさんある。ぜひ自身の手でトライしてほしい。
サンプルのダウンロード
著者：菊池 崇（きくち・たかし）
Web Directions East LLC代表。allWebクリエイター塾講師。米国にてマーケティングを専攻修了。貿易会社を経て、allWebにてXHTML+CSS基礎講座、XHTML+CSS中級講座、XHTML+CSS上級講座、microformats講座などの講師。オーストラリア、米国、カナダなどで開催されている世界的に有名なカンファレンス「Web Directions」の日本版である「Web Directions East」の発起人。
