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

デザイン

css_husen

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

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;
}

css_husen_sample01

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

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

css_husen_sample02

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

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

css_husen_sample03

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

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

デザイン

関連記事