CSS3でボタンを作るシリーズ第三回です。これまでに角丸、テキストシャドウ、ボックスシャドウ、グラデーションを使ってボタンを作成してきました。
過去記事
第一回：入門編（border-radius、text-shadow）
第二回：初級編（box-shadow、gradient）
今回はさらに
を使ってみましょう。まずは前回のおさらいから。
html
css
a.button5{ display: inline-block; padding: 0.5em 1em; background: #cccccc; border: 1px solid #666666; border-radius: 10px; color: #000000; font-size: 30px; line-height: 1; text-shadow: 0px 1px 1px #ffffff; -webkit-box-shadow: 0 1px 5px 0 #bbb, inset 0 1px 1px #fff; -moz-box-shadow: 0 1px 5px 0 #bbb, inset 0 1px 1px #fff; box-shadow: 0 1px 5px 0 #bbb, inset 0 1px 1px #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#888888)); background-image: -moz-linear-gradient(top, #dddddd, #888888); background-image: -o-linear-gradient(top, #dddddd, #888888); }RGBa（RGBaカラーモデル）
対応ブラウザ：Chrome, Safari, Firefox, IE9+, Opera
RGBaとは、赤（Red）、緑（Green）、青（Blue）の3色に、透過度（Alpha）の情報を加えたカラーモデルです。透過度が指定できるというのが新しいですね。RGBaは4つの数値で表現されます。RGBを表す3つの数値は加法混色なので0〜255で、透過度を表す数値は0〜1.0で表します。それでは早速例を見てみましょう。
a.button2{ display: inline-block; padding: 0.5em 1em; background: #cccccc; border: 1px solid #666666; border-radius: 10px; color: #000000; font-size: 30px; line-height: 1; text-shadow: 0px 1px 1px #ffffff; -webkit-box-shadow: inset 0 0.9em 2px rgba(255, 255, 255, 0.3), 0 1px 5px 0 #bbb, inset 0 1px 1px #fff; -moz-box-shadow: inset 0 0.9em 2px rgba(255, 255, 255, 0.3), 0 1px 5px 0 #bbb, inset 0 1px 1px #fff; box-shadow: inset 0 0.9em 2px rgba(255, 255, 255, 0.3), 0 1px 5px 0 #bbb, inset 0 1px 1px #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#888888)); background-image: -moz-linear-gradient(top, #dddddd, #888888); background-image: -o-linear-gradient(top, #dddddd, #888888); }シャドウを複数指定できるのは前回説明しましたね。ここではインナーシャドウのカラー指定にRGBaを使っています。インナーシャドウに透過度30％の白を指定し、ボタンの上部半分を覆う光沢を再現してみました。
@font-face（Webフォント）
対応ブラウザ：Chrome, Safari, Firefox, IE6+, Opera
お次はWebフォントを使ってみましょう。これまでフォントはユーザーのPCにインストールされているものしか使えませんでしたが、CSS3の@font-faceを使うことで制作者がサーバーにアップしたフォントを指定できるようになります。
ただライセンスの問題上、まだ使用できるフォントは少ない（特に日本語）ので、なかなか使いどころがないというのが現状です。
欧文Webフォントなら『Google Web Fonts』などで探せます。ここでは「Play-bold」というフォントを使ってみました。
まずはフォントを読み込ませます。
このようにまずはfont-familyを定義し、そのあとにフォントファイルを読み込ませます。
ここでやっかいなのが、IEには.eotフォントを、その他のブラウザには.ttfか.otfを指定しなければならないということです。またもIEが一人はみ出してる状態です。というわけでIEにも対応させるなら、
と二つの読み込みを指定してあげなければいけません。ちなみにIEはformat("")を解釈できないようなので省略してます。eotフォントは「ttf2eot」などのWebサービスで作ることができます。
フォントを読み込ませることができたら、あとはいつも通りfont-familyで指定するだけです。
@font-face { font-family: Play; src: url("http://www.pressmantech.com/wp/wp-content/uploads/font/Play-Bold.eot"); } @font-face { font-family: Play; src: url("http://www.pressmantech.com/wp/wp-content/uploads/font/Play-Bold.ttf") format("truetype"); } a.button3{ display: inline-block; padding: 0.5em 1em; background: #cccccc; border: 1px solid #666666; border-radius: 10px; color: #000000; font-family: 'Play'; font-size: 30px; line-height: 1; text-shadow: 0px 1px 1px #ffffff; -webkit-box-shadow: inset 0 0.9em 2px rgba(255, 255, 255, 0.3), 0 1px 5px 0 #bbb, inset 0 1px 1px #fff; -moz-box-shadow: inset 0 0.9em 2px rgba(255, 255, 255, 0.3), 0 1px 5px 0 #bbb, inset 0 1px 1px #fff; box-shadow: inset 0 0.9em 2px rgba(255, 255, 255, 0.3), 0 1px 5px 0 #bbb, inset 0 1px 1px #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#888888)); background-image: -moz-linear-gradient(top, #dddddd, #888888); background-image: -o-linear-gradient(top, #dddddd, #888888); }欧文フォントならいろんなのが使えます。ちょっとしたアクセントによさそうですね。
transition（アニメーション）
対応ブラウザ：Chrome, Safari, Firefox, IE9+, Opera
今回最後に紹介するのは『transition』。CSS3で簡単なアニメーションを作成できます。「変化させるプロパティ」、「変化にかける時間」、「変化の仕方」を設定して実行します。
transition-property（変化させるプロパティ）
変化させるプロパティをカンマで区切って指定します。全部指定の場合は「all」が使えます。
transition-duration（変化にかける時間）
どれくらいの時間をかけて変化させるかを単位s（秒）で指定します。
transition-timing-function（変化の仕方）
どのように変化させるかを指定します。「linear」で一定のスピード、「ease-in-out」でゆっくり始まりゆっくり終わる。大抵はこの二つを使うことが多いと思います。まあこの他にもいくつかありますが長くなるので割愛します。
そして、上記プロパティを『transition』でまとめて指定することが可能です。
ここではhover時に、文字色を1秒掛けてゆっくり白に変化するように設定しました。試しにマウスを乗せてみてください。
ばっちりですね！
と、今回はここまでです。次回はいよいよ最終回。『animation』プロパティを使ってもっと複雑なアニメーションを作成していきます。
それでは。