画像の指定箇所からグラデーションを抽出し、スタイルシートを生成するオンラインツール -Gradient-Scanner
Post on:2011年6月24日
手元の画像やオンラインの画像から、このグラデーションいいな、という箇所を抽出し、CSS3 グラデーションのスタイルシートを生成するオンラインツールを紹介します。
![サイトのキャプチャ](/wp-content/uploads-2011/2011062402.png)
[ad#ad-2]
Gradient-Scannerの使い方は簡単です。
まず、画像を「Browse」ボタンをクリックしてアップロードします。
※画像は手元の画像だけでなく、URLでも指定できます。
![サンプルの写真画像](/wp-content/uploads-2011/2011062401.png)
使用した画像は「Clear blue Tropical Water」です。
画像から抽出するグラデーション箇所を指定します。
![サイトのキャプチャ](/wp-content/uploads-2011/2011062403.png)
グラデーションを抽出したキャプチャ
抽出するバーは、縦横斜めに使用できます。
![サイトのキャプチャ](/wp-content/uploads-2011/2011062404.png)
グラデーションを抽出するバーのキャプチャ
グラデーションの抽出が決まったら、「Next」ボタンをクリックします。
![サイトのキャプチャ](/wp-content/uploads-2011/2011062405.png)
グラデーションを抽出したキャプチャ
CSS3 グラデーションのスタイルシートは、下部に生成されます。
また、抽出したグラデーションの色数が多いときは、バーをスライドすることで調整できます。
[ad#ad-2]
更に細かい調整をしたいときは、「Next」ボタンをクリックします。
![サイトのキャプチャ](/wp-content/uploads-2011/2011062406.png)
グラデーションの調整画面のキャプチャ
グラデーションの調整画面では、各色の変更が可能です。
![サイトのキャプチャ](/wp-content/uploads-2011/2011062408.png)
グラデーションの各色の調整キャプチャ
sponsors