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

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

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

菊池崇

ツイートする

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」の発起人。

前へ 1 2 3 4 5 6 次へ