【CSS】やだ･･･オシャレ･･･と思わせるbox-shadow

css3 の box-shadow と transform を使ってボックス要素に立体的なエフェクトを加えるテクニックです。

HTML

<div id="box">
Shareotsu
</div>

CSS

#box {
	position:relative;
	width:300px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	font-size:24px;
	font-weight:bold;
	text-shadow:0 1px 0 #fff;
	line-height:1.5em;
	background:#ddd;
	border-radius:5px;
	-moz-border-radius:5px;
	margin:100px auto 50px;
	padding:2em;
}
#box:before, #box:after {
	z-index:-1;
	position:absolute;
	content:"";
	top:80%;
	bottom:10px;
	left:10px;
	width:50%;
	background:#000;
	-webkit-box-shadow:0 10px 10px #000;
	-moz-box-shadow:0 10px 10px #000;
	box-shadow:0 10px 10px #000;
	-webkit-transform:rotate(-3deg);
	-moz-transform:rotate(-3deg);
	-o-transform:rotate(-3deg);
	-ms-transform:rotate(-3deg);
	transform:rotate(-3deg);
}
#box:after {
	right:10px;
	left:auto;
	-webkit-transform:rotate(3deg);
	-moz-transform:rotate(3deg);
	-o-transform:rotate(3deg);
	-ms-transform:rotate(3deg);
	transform:rotate(3deg);
}

デモ