かつみ 2008/11/02 20:48 Gradient CSS Generator使わせていただきました。
すごく簡単で、感動しました！

縦方向ではなく、横方向のグラデーションも
作りたいのですが、その場合はどうすれば
よろしいでしょうか？

cyokodog 2008/11/03 17:31 IEの場合でしたら、Microsoft.Gradient(GradientType=0　の0の部分を1とすれば横になります。
他のブラウザの場合は、グラデーションを生成してる側のロジックに手を加える必要があります。ちなみにソースはこちら↓でみれます。
http://okyuu.com/ja/tips/3406
このソースの中でcreateLinearGradient(0,0,0,len)としてる箇所があるのですが、これをcreateLinearGradient(0,0,len,0)とすると横方向のグラデーションになるようです。
サイトの方は放置状態ですが、微妙にアクセスがあるみたなので、時間のある時に機能追加してみたいと思います。

man 2009/10/16 16:21 とても便利でいつも使わせてもらっています。
ありがとうございます。

あと、横方向のグラデーションですが、createLinearGradient(0,0,len,0)と指定しても
横方向へグラデーションしません。

大変あつかましい願いなのですが、
よろしければ、教えていただけますか？

cyokodog 2009/10/16 21:08 すいません。ローカル環境で確認したところ
createLinearGradient(0,0,len,len)
の誤りでした
あと
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
となってるところを
progid:DXImageTransform.Microsoft.Gradient(GradientType=1,
としてください。

man 2009/10/18 12:37 ご返答、ありがとうございます。とても感謝しております。

すみません。
こちらでcreateLinearGradient(0,0,len,len)にしてローカル環境で試してみたのですが、Firefox3.5.3では縦方向のグラデーションになってしまいます。
何か別に変更しなければいけない箇所があるのでしょうか？

IE7では横グラデーションになりました。
ありがとうございます。

cyokodog 2009/10/20 00:07 よく確認したらもろもろ修正が必要でした。
とりあえず以下 URL に（即席ですが）水平方向グラデーションを生成する機能を作りましたので、こちらをご利用ください。
http://cyokodog.web.fc2.com/cyokolab/html/gradient_css_generator_w.html

man 2009/10/20 16:27 お世話になっております。
すいません、わざわざ作っていただいたみたいで。
お手数をお掛けして申し訳ありません。

さっそく、水平方向グラデーションを試してみました。
Firefox3.5.3でうまく表示されました。

本当にありがとうございます。言葉では感謝しきれません。
これからも使わせていただきますね。

charu 2009/11/21 16:16 困っています。ご教授下さい！

以下がCSSの一部で、HP左にメニューボタンがあり、その背景を水色から白の横のグラデーションをかけたいと思っています。

いろいろ検索し、コピペするのですが、真っ白になってしまい、進ません。

たぶん、コピペする場所が悪いのだと思うのですが・・・

以下のようにあり、b01の部分の背景を変えたいので、

２行目　background-color: #45B5E9;の部分を

.background_B9E6FB_ffffff_h300{
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#B9E6FB,EndColorStr=#ffffff);
;
background-repeat:repeat-x;
background-color:#ffffff;
}

こちらで作らせて頂いた内容をコピペしてみたのですが、真っ白になります。前後の関係で変えないといけないとかでしょうか？CSSを全く理解しておらず、こんな質問で申し訳ございません。よろしくお願いします。


.b01 {
background-color: #45B5E9;
}

.b02 {
background-color: #45B5E9;
}

cyokodog 2009/11/22 00:39 横方向のグラデーションは対応してなかったのですが、他の方からも要望があったので即席ですが以下URLより横方向グラデーションを生成できるようにしました。

http://cyokodog.web.fc2.com/cyokolab/html/gradient_css_generator_w.html

IE 以外のブラウザにもグラデーションを適用したい場合は、Firefox でコードの生成を行ってください。
以下に縦/横方向にグラデーションをかけたサンプルを用意したのでソースを参考にしてみてください。

http://cyokodog.appspot.com/lab/QA/gradient_css_generator/gradient01a.html

スパム対策のためのダミーです。もし見えても何も入力しないでください