レイヤースタイルのかかったPSDファイルを放り込むとCSS３を返してくれるプラグインの{css:hat}がワクワクする

これでトライアルアンドエラーがへってしゃあないわ

もうHTMLのタイトルとか、見出しの修飾がPhotoshopで全部できてまうやん、と、手抜きをもくろんで仕方ありません。@shintarowfresです。

本筋に全然関係ないのですが、前回の記事で、「ほこほこ、ね」と、@hocohoco_neさんのブログ「ほこほこ、ね」のタイトルを引用した一ボケを試してみたところ、きっちり中の人にばれまして。

私、呼ばれてる？｜frasm企画12発目は@hiroma20さんのブログブランディングしてみた*frasm blog.quusookagaku.com/usual-days/643… @shintarowfresh

— ほこりーんさん (@hocohoco_ne) 5月 26, 2012

こういうつながり方というか、絡み方、めっちゃ面白いなと、味をしめまして、（迷惑な話でしょうが）しばらく続けてみたいと思います。
どや顔で続けてみたいと思います。跳びながら、フライングな感じで、フライングドヤァ(　＾∀＾)

本筋に行きますが。

まだ正式に走り出してはないベータ版というか、順番待ちというか、そういうベータ的なアレなんでしょうが、普段Photoshopを使う身としてはありがたすぎるプラグインなのでメモ的シェア。

CSS Hat translates layer styles to CSS3 code

CSS Hat translates layer styles to CSS3 code

要するにどういうことが出来るかというと

使おうよ！Photoshopを持ってるとブログタイトルロゴが4分でお洒落に仕上がるチュートリアル

こういう感じで、レイヤースタイルでデザインしたモノをCSS3に変換してくれる、というよりも、CSS3のコードをはき出してくれてweb上で再現できてしまうPhotoshopプラグインなのだ。
すごくない？

今までCSS3での修飾はもっぱら

バンクーバーのweb屋の人が公開してくれたChromeのエクステが便利すぎて泣いた。むせび泣いた

これを使って、ブラウザ上でやっていたのです。もちろん、かなり直感的にそれこそレイヤースタイルかける感覚でいけるのですごく便利なのですが、Photoshopで出来てまうなら、もう、それでええやん。と、coderでない僕なんかは思ってしまいます。
どのくらいの再現性なんだろう、ワクワクする。

最後に

というわけで、それこそHTMLとかCSSとかまるでわからないグラフィックなデザイナーでもさくっとCSS3でコーディング出来る時代が、もうすぐそこまで来てるよね。マジで。

文：シンタロヲフレッシュ

はてブ

pocket

twitter