CSS3プロパティgradientとbox-shadowを使ってちょっとかっこいいボタンを作ります。
すでに多くの人がCSS3を使用していますが、参考になればと思います。おまけで、text-shadowも使います。
webkitとmozの違い
CSS3のgradientの指定はwebkitとmozでは違います。
また、グラデーションは線形グラデーションと円形グラデーションを指定できます。
今回は線形グラデーションの指定『linear-gradient』をご紹介します。
ちなみに円形グラデーションは『radial-gradient()』で指定します。円形グラデーションはまたの機会にご紹介します。
CSS
まずボタン本体の設定をします。
position: relative; margin-bottom: 任意; margin-top: 任意; padding: 任意; width: 任意; display: block; color: 任意; font-weight:任意;/*指定しなくても構いません*/ text-decoration: 任意;/*指定しなくても構いません*/ text-align: 任意;/*指定しなくても構いません*/ text-shadow: 任意;/*サンプルです*/ z-index: 1;/*後述のベースより上に来るように指定*/
これはいわゆるa要素の指定です。
positionをrelativeで指定しているのは、後述しますボタンのベースを内包するためです。
ここでちょっとアクセントをつけるためにtext-shadowを使います。
text-shadowは以下のように指定します。
text-shadow
text-shadow：横方向のずれ 下方向のずれ ぼかし 影の色・透明度;
rgbaは読んで字のごとくrgbとアルファ値を指定します。rgbの説明は割愛します。
アルファ値の指定は1.0〜0で指定します。0に近いほど透明度が高くなります。
次にベースとなる背景色を指定します。
それからグラデーションの指定をします。
gradientを指定するときは『background』『background-image』に指定します。
任意:after{
content: "";
position: absolute;
left: -3px;/*サンプルです*/
top: -3px;/*サンプルです*/
width: 100%;
height: 100%;
padding: 2px;
border:任意;
-webkit-border-radius: 任意;/*角丸の指定*/
-moz-border-radius: 任意;/*角丸の指定*/
background-color:任意;/*この色がボタンの基本色になります*/
background-image: -webkit-gradient(linear,任意);/*グラデーションの指定*/
background-image: -moz-linear-gradient(top,任意);/*グラデーションの指定*/
background-image: linear-gradient(top,任意);/*グラデーションの指定*/
-webkit-box-shadow: 任意;
-moz-box-shadow: 任意;
box-shadow: 任意;
z-index: -1;/*本体より下に来るように指定*/
}
a要素に任意のclassをつけ、after疑似要素でプロパティを指定します。
グラデーションの指定方法は以下のとおりです。
webkit
gradient(グラデーションの指定, 角度, 開始色, （途中色）, 終了色)
moz
グラデーションの指定-gradient(角度, 開始色, （途中色）, 終了色)
前述したようにwebkitとmozとの指定方法が違うのがわかると思います。
これを手動でやると結構面倒ですw
また、途中色を指定するときは以下のとおり。
webkit
color-stop(位置, rgba(色指定, 透明度)),
moz
位置, rgba(色指定, 透明度)
次ぎにボタンに影をつけます。
box-shadowの指定は以下のとおり。
box-shadow
box-shadow：横方向のずれ 下方向のずれ ぼかし 影の色・透明度;
insetを使うと内側に影をつけられます。
box-shadow：inset 横方向のずれ 下方向のずれ ぼかし 影の色・透明度;
これはベースの『background-color』を変える事で簡単にボタンの色を変更することができます。が、FireFoxは『gradient』の値を変えないといけません。しかし、スマートフォンサイトでしたら変更できるので、スマートフォンサイトで有効かもしれませんね。
今回はできればSafariかChromeで確認して頂くとわかりやすいと思います。
動作環境は、Firefox4、Safari5とGoogleChrome10です。スマートフォンはiPhone4、Android2.1で確認しています。
ダウンロードはユーザー様の責任で行ってください。
なにか問題が発生した場合でも、当サイトでは責任を負いかねますので、
予めご了承ください。
上記をご承知の方のみ、以下よりダウンロードしてください。
格好いい。
イラストレーター・photoshopで四苦八苦している私には、
朗報なのですが。
角丸は簡単なのですが、gradientに関しては複雑ですね。
どうしたものかと。
でも、最先端行ってます。すばらしいです。解説ともに。
kazuさんいつもコメントありがとうございます。
これのバージョンアップを今更新中です。たいしたことはありませんがw