【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); }
コメントを残す