box-shadow で作る、 ページカールエフェクト。

最近、アスキーさんでCSS3に関する記事を書かせてもらっています。先日、box-shadow について記述させていただいたいのですが関連内容を１つ。box-shadow で影をつける効果を紹介したのですが、これは凄く使えます。ギャラリーサイトなどを作成する際には、特に便利です。

このデモの大きなポイントは、:before, :after 擬似要素の使い方です。実際の影は、:before と:after によって２つ生成されています。また、backgroundを「transparent」にすることによって背景色は取り除かれ影のみが生成されているように見えるのです。また、影には position:absolute を指定して、z-indexを「-1」「-2」を指定しています。これにより、影が下に潜り込みます。

HTMLソース

<ul class="box">

  <li></li>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

</ul>

CSSソース

ul.box {
margin: 0;
padding: 0;
clear: both;
overflow: hidden; }

ul.box li {
list-style-type: none;
margin: 0 30px 30px 0;
padding: 0;
width: 250px;
height: 150px;
border: 1px solid #efefef;
position: relative;
float: left;
background: #ffffff; /* old browsers */
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;

        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }

ul.box li:after {
z-index : -1; /*潜り込み*/
position : absolute;
background : transparent; /*背景色を透明*/
width : 70%;
height : 55%;
content : '';
right : 10px;
bottom : 10px;
-webkit-transform : skew(15deg) rotate(6deg);
   -moz-transform : skew(15deg) rotate(6deg);

        transform : skew(15deg) rotate(6deg);
-webkit-box-shadow : 0 8px 16px rgba(0, 0, 0, 0.3);
   -moz-box-shadow : 0 8px 16px rgba(0, 0, 0, 0.3);

        box-shadow : 0 8px 16px rgba(0, 0, 0, 0.3);  }

ul.box li:before {
z-index : -2;  /*潜り込み*/
position : absolute;
background : transparent;  /*背景色を透明*/
width : 70%;
height : 55%;
content : '';
left : 10px;
bottom : 10px;
-webkit-transform : skew(-15deg) rotate(-6deg);
   -moz-transform : skew(-15deg) rotate(-6deg);

        transform : skew(-15deg) rotate(-6deg);
-webkit-box-shadow : 0 8px 16px rgba(0, 0, 0, 0.3);
   -moz-box-shadow : 0 8px 16px rgba(0, 0, 0, 0.3);

        box-shadow : 0 8px 16px rgba(0, 0, 0, 0.3);  }

このテクニックですが、色を付箋紙の色に変えて手書きフォントを読みこめばメモ書きにも見せることができます。ほんの少しのスパイスでグンと実践で使えるレベルになります。

参照：
http://www.matthamm.com/box-shadow-curl.html

<-- AddThis Button BEGIN -->