wde

webkitのgradient簡単入力ツール

2009-05-23 07:26:21

webkit（Safari3.1以上も含む）ではCSSでbackgroundにグラデーションを適用することができます。OperaではSVGを利用して同じようなことができますが、webkitのCSSの記述は非常に面倒です。

Webkit Surfin’Safari(グラディエントについての記事)
http://webkit.org/blog/175/introducing-css-gradients/

Opera SVG (SVGについての記事)
http://virtuelvis.com/archives/css3/index

http://virtuelvis.com/download/2007/09/kestrel/itunestable/

そこで、Web DirectionsのJohn Allsoppが作成したツールがこれです。

http://westciv.com/gradients/

使い方はいたって簡単

上から『Start』『End』『Stops』ボックスが並んでいる。その中で『Start』と『End』はグラデーション色、Horizontal Position=水平位置、Vertical Position=”垂直位置”をそれぞれ指定することができます。

一番最後の『Stops』は途中で色を追加するものと考えると分かりやすい。色をグラデーションの途中で追加することができる。

今後はradial(放射状)のgradientを実装するとJohnと言っていましたので、後ほど実装されると思います。

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]