CSS3で背景グラデーションをピクセル指定する方法

By | 2010年12月21日

CSS3を使えば画像を使わずにグラデーションを表示させることはできますが、
その書き方として紹介されている方法は、ボックスサイズに対して%(割合)でグラデーションの幅を指定する方法ばかりです。

参考:http://www.css-lecture.com/log/css3/css3-gradient.html

そこで、「上から100pxまでグラデーションにして残りはベタにしたい」といったピクセルでグラデーションの幅を決めたい場合の書き方を調べてみました。

background-image:-webkit-gradient(
linear,
0 0,   /*開始点の位置を座標(X,Y)で指定 */
0 100, /*終了点の位置を座標(X,Y)で指定 */
from(#ffffff),
to(#ff0000)
);

webkitの場合、座標指定に(0 , 100px)のように単位をつけると無効になってしまうので、必ず単位無しで指定するのがポイントです。

background-image: -moz-linear-gradient(
top,
#f30,
#ffc 100px /*終了点の位置をpxで指定*/
);

上記のような書き方をすればピクセル幅固定の2色グラデーションを表現できます。
webkitの場合、color-stop()を使った構文だとうまくグラデーションを作る事ができず、
またwebkitもmozも両方、3色以上のピクセル固定をどうしたら良いのかはまだ不明です。
どなたかご存知の方いらしたら教えていただけると嬉しいです。m(_ _)m


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA