スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーをはてなブックマークに追加
この記事にトラックバックする(FC2ブログユーザー)
http://roka404.blog84.fc2.com/tb.php/5-d1160175

トラックバック

コメント

[C1] あら?

SyntaxHighlighterが効いてない...orz
  • 2010-12-21 00:26
  • akemix2010
  • URL
  • 編集
コメントの投稿
管理者にだけ表示を許可する

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

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
関連記事
スポンサーサイト


このエントリーをはてなブックマークに追加
この記事にトラックバックする(FC2ブログユーザー)
http://roka404.blog84.fc2.com/tb.php/5-d1160175

トラックバック

コメント

[C1] あら?

SyntaxHighlighterが効いてない...orz
  • 2010-12-21 00:26
  • akemix2010
  • URL
  • 編集
コメントの投稿
管理者にだけ表示を許可する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。