CSS3だけでつくるWebボタン！押さずにはいられないボタン簡単3ステップ

2010年9月22日 02:00

インターンシップにきています。

こんにちわ。(・`д・ノ)ノ
面白法人カヤックでインターンシップ中のどうもぽんたです。

先週、鎌倉本社から自由が丘支社に移りました。
自由が丘に来たのは初めてなので、「丘ないなぁ。」って思いました。

そしてこちらはインターン研修で、書いているエントリーです。
どうか柔らかいまなざしで見守って下さいませ！

今回は画像を使わず、CSS3だけでWebボタンをつくる方法を紹介したいと思います。
といっても僕自身つくったことがないので、一緒に挑戦しましょう！！

つづきからどうぞ！

すごいよ！CSS3

≫ CSS3のみでつくっているボタンを紹介している凄いサイトがあります。

ラムネのようなテイストのボタンですな。
これを画像なしでつくってるっていうからスゴイ！

ここまでレベルの高いボタンはつくれないので、
基本重視のシンプルなCSSボタンをつくろうと思います。

まずはCSS3で追加されたプロパティの中から代表的なものをピックアップして復習します。

影をつける！

こんな感じでボックスにシャドウをつけたい角をつけたい時に使いましょう！

これは一番シンプルな指定方法です。
複雑な指定方法もあるみたいですが、それはまたの機会に！

ブラウザによって実装状況が色々なので、
それぞれのブラウザに合わせた指定が必要な点に注意です！

#box_shadow {
  width: 100px;
  height: 100px;
  background-color: #FC0;
  box-shadow: 7px 7px 10px #000;
  -webkit-box-shadow: 7px 7px 10px #000;
  -moz-box-shadow: 7px 7px 10px #000;
}

こぴぺ用コード

角を丸くする！

こんな感じでボックスの角をつけたい時に使いましょう！

これは一番シンプルな指定方法です。
複雑な指定方法はまたの機会に～

#border_radius {
  width: 100px;
  height: 100px;
  background-color: #FC0;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}

こぴぺ用コード

変化に推移を与える！

なんかわかりにくい見出しですが、要はアニメーションです。
CSS3ではマウスオーバーなどのエフェクトにアニメーションを設定できるんです！

CSS3でアニメーションを実現する方法として「animation」プロパティを使う方法も
あるみたいですが、今回は「transition」プロパティを使う方法を解説します！

例えばこんな感じで、マウスオーバーで色をゆっくりむわっと変化させたい時
tra_prev.gif.gif

こんな感じのコードで実現できます！

バージョン3.6まで「transition」に対応してなかったFirefoxも
バージョン4から対応するみたいです！やったね！

#transition {
  width: 100px;
  height: 100px;
  background-color: #FC0;
  transition: background-color 0.5s ease-in-out;
  -webkit-transition: background-color 0.5s ease-in-out;
  -moz-transition: background-color 0.5s ease-in-out;
}
#transition:hover {
  background-color: #5E0;
}

こぴぺ用コード

対応のブラウザは？

Web標準としての勧告がなされていないことなどが理由で、
CSS3のブラウザ実装状況には大分ムラがあります。

InternetExplorerはほとんど対応していません。
CSS3に挑戦するなら Google Chrome や Safariなどがオススメですよ！

CSS3対応ブラウザ

Firefox、Google Chrome、Safariなどのモダンブラウザ（Web標準に準拠したブラウザ）。
モダンブラウザでもバージョンが古いと実装していないので注意！
InternetExplorerはバージョン9から対応予定みたい。
Operaは実装しているものと、していないもののムラが激しいです。