【CSS】付箋紙っぽいエフェクトをつける方法

画像を使わずちょっとおしゃれなエフェクトをつけてみようの会です。
今回は貼りつけた付箋紙のような効果をつける方法を紹介します。

box-shadow で影をつけ、transform でその影の角度を変えてみましょう。

box-shadow	ボックスに影をつけるプロパティです。
transform	要素を拡大、縮小、回転、移動など指定ができるプロパティです。

付箋紙みたいな効果をつける方法

HTML

<div class="husen">付箋っぽいもの</div>

CSS

.husen {
	width: 200px;
	height: 40px;
	line-height: 40px;
	position: relative;
	background: #f0f0f0; /* 付箋の色 */
}
.husen:after {
	width: 170px;
	height: 35px;
	content: "";
	position: absolute;
	top: 0;
	right: 2px;
	/* ぼかし */
	-moz-box-shadow: 0 5px 5px #999; /* Firefox */
	-webkit-box-shadow: 0 5px 5px #999; /* Safari and Chrome */
	box-shadow: 0 5px 5px #999;
	/* 回転 */
	-moz-transform: rotate(3deg); /* FireFox */
	-webkit-transform: rotate(3deg); /* Safari and Chrome */
	-o-transform: rotate(3deg); /* Opera */
	-ms-transform: rotate(3deg); /* IE */
	transform: rotate(3deg);
	z-index: -1;
}

できました。
z-index で背面にまわすことでぼかしボックスが隠れ、影っぽく見えるようになります。
影をつけるだけで右端の紙が浮いているように見えますね。

以下は画像を使っていますが、もうすこし付箋っぽくしてみました。

この赤い画像を使います。
上のソースの付箋色部分に画像も一緒に指定します。

.husen {
	width: 200px;
	height: 40px;
	line-height: 40px;
	position: relative;
	background: #f0f0f0 url('css_husen_sample02.gif') no-repeat right top;
}

できました！よく見る付箋っぽいですね。

残念ながら上記ソースは古いバージョンのIEには非対応です。。