このページの本文へ

もう画像は要らない!CSS3で作る申し込みボタン (2/4)

2011年01月18日 11時00分更新

文●菊池 崇

  • この記事をはてなブックマークに追加
本文印刷

ステップ1:シンプルな角丸ボタンをデザインする

 まずはボタンらしく見せるために、border-radiusプロパティを使ってボタンの角を丸くしよう。あわせて、周囲を囲むborderも指定しておく。

角丸

まずはボタンの角を丸くする

■CSS[サンプル1]


    ul li a {
    display : block;
    width : 300px;
    padding : 8px;
    border : 3px solid #fff;
    color : #fff;
    font-size : 24px;
    text-align : center; 
    text-decoration : none; 
    background-color : orange;
    
    -webkit-border-radius : .8em; /* Saf3-4 + */
-moz-border-radius : .8em; /* FF1+ */
border-radius : .8em; /* Opera 10.5, IE 9, Saf5, Chrome */}


ベンダープリフィックスとは?

 サンプル1のborder-radiusプロパティに前のある「-moz-」は「ベンダープリフィックス」と呼ばれる接頭辞で、以下のようにブラウザー名を表している。ベンダープリフィックスは、正式勧告前のCSS2.1/CSS3プロパティをブラウザーが先行実装・独自実装する際に利用され、該当するブラウザーだけが対象になる。

ベンダープリフィックスブラウザー
-moz- Firefox
-webkit- Safari, Chrome
-o- Opera
-ms-IE
-khtml- Konqueror
 

ステップ2:ボタンを立体的にする

 次に、box-shadowを適用してボタンに立体感を付けよう。これでだいぶボタンらしい見た目になってきた。

ボタンの周りに影を付けることでボタンらしい見た目になった

■CSS[サンプル2]


-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .5); /* FF3.5+ */
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .5); /* Saf3.0+, Chrome */
box-shadow: 0 0 5px rgba(0, 0, 0, .5); /* Opera 10.5, IE 9.0 */


 続いて、マウスオーバーを設定し、ボタンがクリックできることを分かりやすく伝えよう。マウスオーバー時にボタンの周りの影が濃くなるように、rgbaのa(アルファ)値を0.5から0.8に変更する。rgbaのa値は1へ近づくほど透明度が低くなり、ソリッドな色へ近づく。

 これで、デフォルト時とマウスオーバー時で、ボタンの影の濃さが変わるようになった。

マウスカーソルをボタンに重ねていない状態(デフォルト時)

マウスカーソルをボタンに重ねた状態(マウスオーバー時)

■CSS[サンプル3]


ul li a:hover {
-webkit-box-shadow : 0 0 8px rgba(0, 0, 0, .8); /* Saf3.0+, Chrome */
-moz-box-shadow : 0 0 8px rgba(0, 0, 0, .8); /* FF3.5+ */
box-shadow : 0 0 8px rgba(0, 0, 0, .8); /* Opera 10.5, IE 9.0 */ }


ステップ3:スムーズなアニメーションを付けよう

 サンプル3を発展させると、マウスオーバーしたときに影がゆっくりと濃くなるアニメーションも付けられる。こうしたアニメーション処理は従来、JavaScriptを使う必要があったが、CSS3のtransitionプロパティを使えば簡単だ。

■CSS[サンプル4]


ul li a {
-moz-transition: -moz-box-shadow .4s ease-out;  /* FF3.7+ */
-o-transition: box-shadow .4s ease-out;  /* Opera 10.5 */
-webkit-transition: box-shadow .4s ease-out;  /* Saf3.2+, Chrome */ }


この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く