WEBデザインテクニック|KLUTCHE

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

デモ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です