画像の指定箇所からグラデーションを抽出し、スタイルシートを生成するオンラインツール -Gradient-Scanner
Post on:2011年6月24日
手元の画像やオンラインの画像から、このグラデーションいいな、という箇所を抽出し、CSS3 グラデーションのスタイルシートを生成するオンラインツールを紹介します。

[ad#ad-2]
Gradient-Scannerの使い方は簡単です。
まず、画像を「Browse」ボタンをクリックしてアップロードします。
※画像は手元の画像だけでなく、URLでも指定できます。

使用した画像は「Clear blue Tropical Water」です。
画像から抽出するグラデーション箇所を指定します。

グラデーションを抽出したキャプチャ
抽出するバーは、縦横斜めに使用できます。

グラデーションを抽出するバーのキャプチャ
グラデーションの抽出が決まったら、「Next」ボタンをクリックします。

グラデーションを抽出したキャプチャ
CSS3 グラデーションのスタイルシートは、下部に生成されます。
また、抽出したグラデーションの色数が多いときは、バーをスライドすることで調整できます。
[ad#ad-2]
更に細かい調整をしたいときは、「Next」ボタンをクリックします。

グラデーションの調整画面のキャプチャ
グラデーションの調整画面では、各色の変更が可能です。

グラデーションの各色の調整キャプチャ
sponsors