この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
透過PNGを使って色違いのグラデーションのついたボタンを作る方法を紹介します。
まず、Photoshop等でボタンの大きさに合わせて黒から透明のグラデーションをかけたものを作成します。
(レイヤーの不透明度を50%ほどにし、切り出す幅は横方向にリピートさせるため1pxにします)
そして、以下のように記述します。
XHTML
<a href=”#” class=”button1″>ボタン</a>
<a href=”#” class=”button2″>ボタン</a>
<a href=”#” class=”button3″>ボタン</a>
CSS
.button1{
background:url(button.png) #310202 repeat-x left bottom;
color:#fff;
padding:10px 20px;
border :solid 1px;
}
.button2{
background:url(button.png) #00074D repeat-x left bottom;
color:#fff;
padding:10px 20px;
border :solid 1px;
}
.button3{
background:url(button.png) #004D02 repeat-x left bottom;
color:#fff;
padding:10px 20px;
border :solid 1px;
}
で表示させると
色違いのグラデーションがかかったボタンの完成。
背景色を変更するだけで簡単に色違いのボタンが作れます。
※IE６では透過PNG画像に対応していない為、別途対策が必要です。
