ようやくIE9が正式リリースされ、そろそろHTML5、CSS3を勉強しようと思っている方も多いんじゃないでしょうか。そこで今日から数回に渡って、CSS3のみでデザインされたボタンを作成するチュートリアル記事を書いていこうと思います。
最終目標はこのボタンです。（Safari、Chrome、Firefox5+だとマウスオンで動きます）
@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"); } @-webkit-keyframes jump { 0%{ bottom: 0;} 10% { bottom: 6px;} 70% { bottom: 10px;} 90% { bottom: 1px;} 100% { bottom: 0;} } @-moz-keyframes jump { 0%{ bottom: 0;} 10% { bottom: 6px;} 70% { bottom: 10px;} 90% { bottom: 1px;} 100% { bottom: 0;} } a.button_comp{ position: relative; bottom: 0; display: inline-block; padding: 0.5em 1em; border: 1px solid #666666; border-radius: 10px; color: #000000; font-size: 30px; line-height: 1; text-shadow: 0px 1px 1px #ffffff; background: #cccccc; background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#888888)); background-image: -moz-linear-gradient(top, #dddddd, #888888); -webkit-box-shadow: inset 0 1.0em 2px rgba(255, 255, 255, 0.3), inset 0 1px 1px #fff, 0 1px 5px #bbb; -moz-box-shadow: inset 0 1.0em 2px rgba(255, 255, 255, 0.3), inset 0 1px 1px #fff, 0 1px 5px #bbb; box-shadow: inset 0 1.0em 2px rgba(255, 255, 255, 0.3), inset 0 1px 1px #fff, 0 1px 5px #bbb; font-family: 'Play'; -webkit-transition: 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; } a.button_comp:hover{ -webkit-animation-name: jump; -moz-animation-name: jump; -webkit-animation-duration: 0.7s; -moz-animation-duration: 0.7s; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; color: #fff; }CSS3非対応ブラウザをお使いの方用に画像も載せておきます。
今回は初級編ということで、比較的とっつきやすいプロパティのみを使ってボタンを作ってみましょう。
今回使用するプロパティは
の2つです。まずはベースとなるソースを通常のCSSで記述します。
html
css
生成されるボタンはこんな感じですね。
border-radius（角丸）
対応ブラウザ：Chrome, Safari, Firefox, IE9+, Opera
まずは簡単な角丸ボックスから。以前は四隅に画像を配置したりJavaScriptを使用したりと、角丸ボックス一つを作るのにも一苦労でした。しかしCSS3ならそんな必要なありません。たった一行のコードを追加するだけです。
すると先程のボタンはこうなります。（※対応ブラウザでご覧下さい。）
とても簡単ですね。ちなみに4隅に別々のサイズの角丸を適用することも可能です。
この場合、左上の角から時計回りに10px、0、10px、0と適用されます。
実はこのプロパティはさらに細かい設定も可能ですが、説明すると少々長くなってしますので今回はこの辺にしておきます。詳しく学びたい方はこの辺を見るといいと思います。
CSS3で角丸ボックスを作る『border-radius』プロパティのまとめ - MONODEZ
text-shadow（テキストシャドウ）
対応ブラウザ：Chrome, Safari, Firefox, Opera
お次は文字（テキスト）にシャドウを付けてみましょう。これも一行追加するだけです。
※対応ブラウザでご覧下さい。
ご覧のようにCSSだけでテキストにシャドウ（影）を付けることができました。
各値の詳細は
となります。このままではちょっとくどいので、シャドウの色を白（#ffffff）にして、ぼかし1pxの控えめなシャドウにしてみましょう。
これで文字の真下にうっすらとハイライトが追加されました。巷で言うとこのレタープレス風ですね。
と、今回はここまでです。CSS3って便利で簡単だな〜と感じることが出来ればOKです。次回はドロップシャドウとグラデーションを使って、もう少し装飾を強化していきます。
それでは。