11 月 21 2006

CSSによる透過PNG角丸ボックス

Published by haga at 17:25 under XHTML/CSS2, programing

CSSで角丸ボックスを作るという もうやりつくされた事をゼロから作ってみた。

僕は基本的にデザインだけのためのソースコードは 嫌いなんだけど、まぁクライアントにやれといわれればやります。 クライアントが白といえば、黒だって絹のような純白です。

CSSによる透過PNG角丸ボックス　サンプル

CSSによる透過PNG角丸ボックス　ZIPファイル

ポイントは透過PNGを使えるので、どんな背景が来ても気にしない気にしない、ということと IE6にも対応可という事。

Radius というクラスパッケージはradius.cssに記述されているので それを継承すれば、いろんな色の角丸ボックスが作れます。 サンプルはradius_blue.cssという継承クラスを用意してみました。

HTMLはこんな感じです。 角丸を表現するためにblockHeaderとblockFooterというクラスを持ったDIV要素を作ります。

<!-- begin Radius -->
<div class="Radius">
  <div class="blockHeader">
    <p class="cRadius"></p>
    <p class="lRadius"></p>
    <p class="rRadius"></p>
  </div>
  <div class="blockBody">
    <p>本文本文本文本文本文本文本文本文本文本文。</p>
    <p>本文本文本文本文本文本文本文本文本文本文。</p>
    <p>本文本文本文本文本文本文本文本文本文本文。</p>
    <p>本文本文本文本文本文本文本文本文本文本文。</p>
  </div>
  <div class="blockFooter">
    <p class="cRadius"></p>
    <p class="lRadius"></p>
    <p class="rRadius"></p>
  </div>
</div>
<!-- end Radius -->


radius.css

/* --------------------------------
    Radius
-------------------------------- */
.Radius {}
   
    /* define background-color */
    .Radius .blockBody
    ,.Radius .cRadius {
        background:#9C0;
    }
   
    /* define radius r-height */
    .Radius .blockHeader
    ,.Radius .blockHeader p
    ,.Radius .blockFooter
    ,.Radius .blockFooter p {
        height:10px;
        overflow:hidden;
        }
   
    /* define radius r-width */
    .Radius .rRadius
    ,.Radius .lRadius {
        width:10px;
        }
    .Radius p.cRadius {
        margin:0 10px;
        }
    .Radius .blockBody {
        padding:0 10px;
        }
    /* define positoin */
    .Radius .blockHeader
    ,.Radius .blockFooter {
        position:relative;
        }
    .Radius .lRadius
    ,.Radius .rRadius {
        position:absolute;
        top:0;
        }
        .Radius .lRadius { left:0; }
        .Radius .rRadius { right:0; }
       
    /* define image */
    .Radius .blockHeader .rRadius {
        background:transparent url('img/green_radius_tr.png') no-repeat;
        }
    .Radius .blockHeader .lRadius {
        background:transparent url('img/green_radius_tl.png') no-repeat;
        }
    .Radius .blockFooter .rRadius {
        background:transparent url('img/green_radius_br.png') no-repeat;
        }
    .Radius .blockFooter .lRadius {
        background:transparent url('img/green_radius_bl.png') no-repeat;
        }
        /* define image for IE6 */
        * html .Radius .blockHeader .rRadius {
            background:none;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod=crop, src='img/green_radius_tr.png');
            }
        * html .Radius .blockHeader .lRadius {
            background:none;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod=crop, src='img/green_radius_tl.png');
            }
        * html .Radius .blockFooter .rRadius {
            background:none;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod=crop, src='img/green_radius_br.png');
            }
        * html .Radius .blockFooter .lRadius {
            background:none;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod=crop, src='img/green_radius_bl.png');
            }


radius_blue.css

/* --------------------------------
    Extended Radius Blue
-------------------------------- */
.Radius.blue {}
   
    /* define background-color */
    .Radius.blue .blockBody
    ,.Radius.blue .cRadius {
        background:#69C;
    }
    /* define image */
    .Radius.blue .blockHeader .rRadius {
        background:transparent url('img/blue_radius_tr.png') no-repeat;
        }
    .Radius.blue .blockHeader .lRadius {
        background:transparent url('img/blue_radius_tl.png') no-repeat;
        }
    .Radius.blue .blockFooter .rRadius {
        background:transparent url('img/blue_radius_br.png') no-repeat;
        }
    .Radius.blue .blockFooter .lRadius {
        background:transparent url('img/blue_radius_bl.png') no-repeat;
        }
        /* define image for IE6 */
        * html .Radius.blue .blockHeader .rRadius {
            background:none;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod=crop, src='img/blue_radius_tr.png');
            }
        * html .Radius.blue .blockHeader .lRadius {
            background:none;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod=crop, src='img/blue_radius_tl.png');
            }
        * html .Radius.blue .blockFooter .rRadius {
            background:none;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod=crop, src='img/blue_radius_br.png');
            }
        * html .Radius.blue .blockFooter .lRadius {
            background:none;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod=crop, src='img/blue_radius_bl.png');
            }


Trackback URI | Comments RSS

Leave a Reply