CSS3でかっこいいボタンを作ろう【第三回：中級編（RGBa、@font-face、transition）】

CSS3でボタンを作るシリーズ第三回です。これまでに角丸、テキストシャドウ、ボックスシャドウ、グラデーションを使ってボタンを作成してきました。

過去記事
第一回：入門編（border-radius、text-shadow）
第二回：初級編（box-shadow、gradient）

今回はさらに

• RGBa（RGBaカラーモデル）
• @font-face（Webフォント）
• transition（アニメーション）

を使ってみましょう。まずは前回のおさらいから。

html

<a href="#" class="button">Button</a>

css

a.button{
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);
}

Button

RGBa（RGBaカラーモデル）

対応ブラウザ：Chrome, Safari, Firefox, IE9+, Opera

RGBaとは、赤（Red）、緑（Green）、青（Blue）の3色に、透過度（Alpha）の情報を加えたカラーモデルです。透過度が指定できるというのが新しいですね。RGBaは4つの数値で表現されます。RGBを表す3つの数値は加法混色なので0〜255で、透過度を表す数値は0〜1.0で表します。それでは早速例を見てみましょう。

a.button{
-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;
}

Button

シャドウを複数指定できるのは前回説明しましたね。ここではインナーシャドウのカラー指定にRGBaを使っています。インナーシャドウに透過度30％の白を指定し、ボタンの上部半分を覆う光沢を再現してみました。

@font-face（Webフォント）

対応ブラウザ：Chrome, Safari, Firefox, IE6+, Opera

お次はWebフォントを使ってみましょう。これまでフォントはユーザーのPCにインストールされているものしか使えませんでしたが、CSS3の@font-faceを使うことで制作者がサーバーにアップしたフォントを指定できるようになります。
ただライセンスの問題上、まだ使用できるフォントは少ない（特に日本語）ので、なかなか使いどころがないというのが現状です。
欧文Webフォントなら『Google Web Fonts』などで探せます。ここでは「Play-bold」というフォントを使ってみました。

まずはフォントを読み込ませます。

@font-face {
font-family: Play;
src: url("フォントファイルへのパス/Play-bold.ttf") format("truetype");
}

このようにまずはfont-familyを定義し、そのあとにフォントファイルを読み込ませます。
ここでやっかいなのが、IEには.eotフォントを、その他のブラウザには.ttfか.otfを指定しなければならないということです。またもIEが一人はみ出してる状態です。というわけでIEにも対応させるなら、

@font-face {
font-family: Play;
src: url("フォントファイルへのパス/Play-bold.eot"),
}
@font-face {
font-family: Play;
src: url("フォントファイルへのパス/Play-bold.ttf") format("truetype");
}

と二つの読み込みを指定してあげなければいけません。ちなみにIEはformat("")を解釈できないようなので省略してます。eotフォントは「ttf2eot」などのWebサービスで作ることができます。

フォントを読み込ませることができたら、あとはいつも通りfont-familyで指定するだけです。

@font-face {
font-family: Play;
src: url("フォントファイルへのパス/Play-bold.eot"),
}
@font-face {
font-family: Play;
src: url("フォントファイルへのパス/Play-bold.ttf") format("truetype");
}
a.button{
font-family: 'Play';
}

Button

欧文フォントならいろんなのが使えます。ちょっとしたアクセントによさそうですね。

transition（アニメーション）

対応ブラウザ：Chrome, Safari, Firefox, IE9+, Opera

今回最後に紹介するのは『transition』。CSS3で簡単なアニメーションを作成できます。「変化させるプロパティ」、「変化にかける時間」、「変化の仕方」を設定して実行します。

transition-property（変化させるプロパティ）

変化させるプロパティをカンマで区切って指定します。全部指定の場合は「all」が使えます。

transition-duration（変化にかける時間）

どれくらいの時間をかけて変化させるかを単位s（秒）で指定します。

transition-timing-function（変化の仕方）

どのように変化させるかを指定します。「linear」で一定のスピード、「ease-in-out」でゆっくり始まりゆっくり終わる。大抵はこの二つを使うことが多いと思います。まあこの他にもいくつかありますが長くなるので割愛します。

そして、上記プロパティを『transition』でまとめて指定することが可能です。

a.button{
-webkit-transition: all 1.0s ease-in-out;
-moz-transition: all 1.0s ease-in-out;
-ms-transition: all 1.0s ease-in-out;
-o-transition: all 1.0s ease-in-out;
}
a.button:hover{
color: #ffffff;
}

ここではhover時に、文字色を1秒掛けてゆっくり白に変化するように設定しました。試しにマウスを乗せてみてください。

Button

ばっちりですね！
と、今回はここまでです。次回はいよいよ最終回。『animation』プロパティを使ってもっと複雑なアニメーションを作成していきます。
それでは。