CSS3で簡単にボタン風バナーを作る

CSS3から背景にグラデーションをつけたり、ボーダーを曲線にすることができるようになりました。それを用いて、画像を使わず簡単にボタン風のバナーを作成するテクニックです。

使うプロパティは下記の通り
・border-radius（ボーダーに曲線をつける）
・backgroundのgradientプロパティ（背景にグラデーションをかける）

CSS

HTML

border-radiusは値を大きくするとそれだけ角が丸くなります。backgroundのgradientプロパティについては、後日詳しくご紹介します。

注意点として、gradientプロパティはIE8以前のブラウザには対応していないこと、また各ブラウザ用に、CSSプロパティを指定する必要があることです。（プロパティの頭に付いている-moz-や-webkit-が各ブラウザ向けに指定するためのものです。）

これらは、回線速度がそれほど速くなく、極力画像は使わない方がよいスマートフォン向けのコーディングに用いると効果的です。