角丸にチャレンジ – 透過PNG画像+CSS編

前回、GIF画像を使った角丸を紹介しましたが、GIF画像の代わりに透過PNG画像を使った場合、HTMLは同じですが、CSSで少し調整が必要になります。(なお、透過PNG画像は IE6以下では未対応です。)

rouded-corners-1-5.png

この図を見ればわかると思いますが、それぞれの背景画像に透過PNGを使った場合、重なった部分が見えてしまいます(サンプル)。したがって、各 div に margin を入れて調整します。margin の大きさは、c の背景画像の横幅と同じにします。

[cc lang="css"]
.dialog .header{
background:transparent url(rc_r1_c1.gif) no-repeat 0px 0px;
margin-right:13px;
}
.dialog .header .c{
background:transparent url(rc_r1_c2.gif) no-repeat right 0px;
margin-right:-13px;
}
.dialog .body{
background:transparent url(rc_r2_c1.gif) repeat-y 0px 0px;
margin-right:13px;
}
.dialog .body .c{
background:transparent url(rc_r2_c2.gif) repeat-y right 0px;
margin-right:-13px;
}
.dialog .footer{
background:transparent url(rc_r3_c1.gif) no-repeat 0px 0px;
margin-right:13px;
}
.dialog .footer .c{
background:transparent url(rc_r3_c2.gif) no-repeat right 0px;
margin-right:-13px;
}
[/cc]

これで、透過PNG画像でも角丸ができました。(サンプル

角丸にチャレンジ – 透過PNG画像+CSS編」への1件のフィードバック

  1. ピンバック: デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>