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

prasmっていうブログだよ

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

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

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

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


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

本筋に行きますが。

まだ正式に走り出してはないベータ版というか、順番待ちというか、そういうベータ的なアレなんでしょうが、普段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でコーディング出来る時代が、もうすぐそこまで来てるよね。マジで。

次回の記事は
「ドメインを変更すると具体的にどうなるのか」
読みのがしなくッ!