[CSS]スタイルシートでページカールのエフェクトを実装するチュートリアル

パネルや画像などのちょっとしたアクセントにぴったり、紙がめくれたようなページカールのエフェクトをCSS3の「box-shadow」を使用して実装するスタイルシートを紹介します。

Pure CSS3 box-shadow page curl effect
デモ

[ad#ad-2]

上記キャプチャだと小さいので、拡大したものを。

デモ

[ad#ad-2]

実装は、下記のようになります。

HTML

ページカールのエフェクトは「box-shadow」が適用できれば、どんな要素でも適用できます。
デモではリスト要素を使用しています。

<ul class="box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

CSS

CSS3の「box-shadow」「RGBa」を使用します。
CSS3非対応の旧ブラウザ用のスタイルシートも記述されています。

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

ul.box li {
	list-style-type: none;
	margin: 0 20px 30px 0;
	padding: 0;
	width: 168px;
	height: 150px;
	border: 1px solid #efefef;
	position: relative;
	float: left;
	background: #ffffff; /* old browsers */
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	-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; }

ul.box li:after {
	z-index: -1;
	position: absolute;
	background: transparent;
	width: 70%;
	height: 55%;
	content: '';
	right: 10px;
	bottom: 10px;
	transform: skew(15deg) rotate(6deg);
	-webkit-transform: skew(15deg) rotate(6deg);
	-moz-transform: skew(15deg) rotate(6deg);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-moz-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;
	transform: skew(-15deg) rotate(-6deg);
	-webkit-transform: skew(-15deg) rotate(-6deg);
	-moz-transform: skew(-15deg) rotate(-6deg);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); }