Category Archives: CSS3

各種ブラウザにおけるlinear-gradient対応状況について

ブラウザの種類・バージョンで書式が大きく違って何かとやっかいなlinear-gradient()の 対応状況をまとめてみました。 使用したサンプルはこちら。 表示結果比較の画面キャプチャはこちら 【結果】 ●-webkit-gradient(linear,left top,left bottom,from(#FC0),to(#fff)); [対応]Chrome/Safari4+/iOS4+/Android2.x/ ●-webkit-linear-gradient(top,#FC0,#fff); [対応]Chrome/Safari5+/iOS5+ ●-webkit-linear-gradient(to bottom,#FC0,

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

CSS3を使えば画像を使わずにグラデーションを表示させることはできますが、 その書き方として紹介されている方法は、ボックスサイズに対して%(割合)でグラデーションの幅を指定する方法ばかりです。 参考:http://www.css-lecture.com/log/css3/css3-gradient.html そこで、「上から100pxまでグラデーションにして残りはベタにしたい」といったピクセルでグラデーションの幅を決