Gradientのスタイルを抽出する2012-11-30デザインカンプとして作られた画像のグラデーションをCSS化するために、PhotoshopやらFireworksで色を抽出してつくるは面倒くさい。単純にfromからtoまでの色を指定するだけであればそうでもないかもしれないが、すこし複雑な形状をしたグラデーションだと、正確に再現するのはむずかしい。CS6でもオブジェクトのCSSを取得できるらしい。これらのような元のデザインデータが無いとか、基本的なフィルタのみで作られていないオブジェクトであればうまく抽出することができないこともあるので、画像(画像ファイル)そのものから抽出するツールを紹介する。ColorZilla.comもしかしたら使ったことがある人も多いかもしれないが、このウェブサービスは、PhotoshopなどのツールライクなUIでグラデーションを指定し、スタイルを生成するサービスだ。Presetsから用意されているパターンを選び、そこから色を変えることもできるし、ツマミを調整すれば独自のグラデーションをつくることができる。変更はそのまますぐに右側にあるCSSに反映されるので、それをコピーすればいい。今回はこのツールの使い方の説明は省き、表題の画像をアップロードして抽出する方法を紹介する。そもそも難しいツールでもないので、触れば今回紹介する機能含め、簡単に使えるので試してほしい。imageをクリックして画像をアップするだけだ。実際にアップロードしてみたものをいくつか挙げる。100%);}下記はこのスタイルを適用したもの。だいたい一緒に見えますかね。複雑なグラデーションボタンのようなグラデーション。中央がずれてしまったけれど、とりあえず。100%);}CSSを適用したのは下記。ずれた位置まで丁寧に再現されているものの、画像の方の中央のボケが無くなっている。円形グラデーション円形グラデーションもサポートしているようだが、画像アップロードの方はどうだろうか。100%);}抽出したコードを見ても分かるとおもうが、色は1色しか抜けていない。個人的には、線形のグラデーションと比べると、実用的にもあまり円形のCSSグラデーションを使う機会は少ないので、再現できなくてもとりあえずは気にしないでおく。100%の再現とはいえない円形はともかく、複雑なグラデーションのサンプルのように、完全に再現するためのコードは線形のものでも100%なものは生成されない。見た目の再現を重要視するなら、そのまま画像を使う方が良いかもしれない。それでもかなり簡単なものなのでおすすめする。Sullivan氏の記事で紹介されたもの中にはコマンドラインツールもある様子。同じようにコマンドラインで実行するのはあると思われるので、また見つけて試せたら記事にしたい。SpeakerBY-NC-SA。