トップ > 日記 > htmlブロックを画像一枚でグローさせる

htmlブロックを画像一枚でグローさせる

日記

画像一枚を使ってCSSスプライトの技法で、ブロックをグローさせるサンプルコードです。

CSS Mojo: Adding Polish To Your Pagesで見つけたのですが、spanエレメントの使い方が、すごいなぁ　と思わせてくれました





他の方法で、グローっぽい表現をする手法に、

"css3で影をつける"
とか、"スライディングドア"
というCSSのテクニックを使うこともあります

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">
.mod {
   position:relative;
   z-index:0;
}
.mod .mod-content{
   background:#acc;
   border:1px solid #eaeaea;
   position:relative;
   z-index:2;
}
/* x1 = top and left edges; 
   x1a = top right corner; 
   x2 = right and bottom edges; 
   x2a = bottom left corner */
.mod .x1,
.mod .x1a,
.mod .x2,
.mod .x2a {
   display:block;
   background:url(images/glow.png) no-repeat;
   /* turn off for IE6 or use a GIF */
   _background:transparent; 
   width:100%;
   height:100%;
   position:absolute;
}
.mod .x1{
   background-position:0 0;
   z-index:-2;
   top:-10px; /* set to the size of the glow */
   left:-10px;
   bottom:0;
   /* set glow to the edges of 'mod' */
   padding:0 10px 10px 0; 
}
.mod .x1 .x1a {
   height:10px;
   width:10px;
   background-position:100% 0;
   right:-10px;
   top:0;
}
.mod .x2 {
   background-position:100% 100%;
   z-index:-1;
   bottom:-10px;
   right:-10px;
   padding:10px 0 0 10px;
}
.mod .x2 .x2a {
   height:10px;
   width:10px;
   background-position:0 100%;
   left:-10px;
   bottom:0;
}

/*.hd,.bd,.ft{margin-left:3em;}*/
</style>
</head>

<body>

<div id="mod-id" class="mod">
<span class="x1"><span class="x1a"></span></span>
<span class="x2"><span class="x2a"></span></span>
   <div class="mod-content">
     <div class="hd">
        <h3>Module head</h3>
     </div>
     <div class="bd">
       <p>Module body</p>
     </div>
     <div class="ft">
         <p class="ft-wrapper">Module foot</p>
     </div>
   </div>
</div>



</body>

</html>

TOP