このページの本文へ

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


Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

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

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

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