PRESSMAN*Tech

HTML5, CSS3からWordPress, AWS, Elasticsearchまで。プレスマンのスタッフが綴る技術ブログ。

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

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

過去記事
第一回:入門編(border-radius、text-shadow)
第二回:初級編(box-shadow、gradient)

今回はさらに

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

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』プロパティを使ってもっと複雑なアニメーションを作成していきます。
それでは。

投稿者:Itoh
このエントリーをはてなブックマークに追加

私たちと一緒に働きませんか?

株式会社プレスマンでは、コーディングが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。まずは募集職種をご覧の上、お気軽にお問い合わせください。あなたとお会いできるのを楽しみにしています。

プレスマンの採用情報を見る →

コメントは受け付けていません。

▲ 先頭へ戻る