CSSグラデーションを使ってクールなボタンをつくる方法

急上昇ワード

[

]

後藤大地　 [2009/12/04]

印刷

Firefox web browser - Faster, more secure & customizable

公開が近づいているFirefox 3.6 (Gecko 1.9.2)ではCSS関連の機能が強化される。従来サポートしてきた機能の強化に加え、CSS3からいくつか新機能の取り込みと、Mozillaが提案する独自の機能が追加されることになっている。Mozillaが提案する機能のうちグラデーションは応用の幅が広くさまざまな便利な効果が期待できる。

building beautiful buttons with css gradientsにおいて、CSSグラデーション機能を使ってボタンを作成した例が紹介されている。Firefox 3.6 beta4でCSSグラデーションボタンを閲覧するとグラデーションのかかったボタンが表示される。同じページをFirefox 3.5.5で閲覧するとグラデーションのないボタンが表示される。もともとこのボタン自体は次期バージョンのPersonasサイトで使うために作成されたものだという。

Firefox 3.6 beta4でCSSグラデーションボタンを表示させた場合

Firefox 3.5.5でCSSグラデーションボタンを表示させた場合

building beautiful buttons with css gradientsではCSSグラデーション機能がもたらすいくつかの効果を紹介している。紹介されている効果は次のとおり。

CSSグラデーション機能の効果
画像ボタンと比べて、テキストを変更するたびに画像を編集する必要がない
画像ボタンと比べてダウンロード時間を短縮できる
画像ボタンと比べてローカライズが簡単に実施できる
画像ボタンとアクセッサビリティサポートの面で好ましい

building beautiful buttons with css gradientsでは、テキストをa要素でリンク対象とし、これにCSSを徐々に適用させながらボタンに仕上げていく様子を紹介している。以下に説明されている内容を日本語のテキストに適用した例を掲載しておく。テキストがグラデーションのかかったボタンに変わっていく様子が確認できる。なお、もともとの説明にあるとおりテキストの変更が簡単にできることから、グラデーション効果のかかった画像ボタンを作成するためのツールとしても利用できそうだ。


日本語でCSSグラデーションボタンを作成した過程その1	日本語でCSSグラデーションボタンを作成した過程その2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Firefox 3.6 CSSグラデーションボタンデモその1</title>
<style type="text/css">
.button {
  width: 400px;
}
.linear_one {
  display: block;
}
.linear_two {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 138.5%;
  text-align: center;
  text-decoration: none;
}
.linear_three {
  padding: 10px;
  -moz-border-radius: 10px;
  border: 1px solid #659635;
  background: #99ca28;
}
.info {
  font-size: 81%;
}
</style>
</head> 
<body>
<p class="button">
 <a class="linear_one" href="http://journal.mycom.co.jp/enterprise">
  <span>マイコミジャーナル エンタープライズ</span><br />
  <span class="info">知りたい!を刺激する総合専門サイト</span>
 </a>
</p>
<hr />
<p class="button">
 <a class="linear_one linear_two" href="http://journal.mycom.co.jp/enterprise">
  <span>マイコミジャーナル エンタープライズ</span><br />
  <span class="info">知りたい!を刺激する総合専門サイト</span>
 </a>
</p>
<hr />
<p class="button">
 <a class="linear_one linear_two linear_three" href="http://journal.mycom.co.jp/enterprise">
  <span>マイコミジャーナル エンタープライズ</span><br />
  <span class="info">知りたい!を刺激する総合専門サイト</span>
 </a>
</p>
</body> 
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Firefox 3.6 CSSグラデーションボタンデモその2</title>
<style type="text/css">
.button {
  width: 400px;
}
.linear_one {
  display: block;
}
.linear_two {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 138.5%;
  text-align: center;
  text-decoration: none;
}
.linear_three {
  padding: 10px;
  -moz-border-radius: 10px;
  border: 1px solid #659635;
  background: #99ca28;
}
.linear_four {
  text-shadow: -1px -1px 2px #777777;
  color: #ffffff;
}
.linear_five {
  background: -moz-linear-gradient(top, #CFE782 0%, #9BCB2A 2%, #5DA331 97%, #659635 100%);
}
.info {
  font-size: 81%;
}
</style>
</head> 
<body>
<p class="button">
 <a class="linear_one linear_two linear_three linear_four" href="http://journal.mycom.co.jp/enterprise">
  <span>マイコミジャーナル エンタープライズ</span><br />
  <span class="info">知りたい!を刺激する総合専門サイト</span>
 </a>
</p>
<hr />
<p class="button">
 <a class="linear_one linear_two linear_three linear_four linear_five" href="http://journal.mycom.co.jp/enterprise">
  <span>マイコミジャーナル エンタープライズ</span><br />
  <span class="info">知りたい!を刺激する総合専門サイト</span>
 </a>
</p>
</body> 
</html>