2014/07/16

コーディングが楽になる!オブジェクトからCSS3を出力するPhotoshopプラグイン「CSS3Ps」

コーディングが楽になる!オブジェクトからCSS3を出力するPhotoshopプラグイン「CSS3Ps」

「CSS3Ps」は、Photoshopで作成したオブジェクトのCSSを出力できるプラグインです。※CS3以降対応
CSS3でコーディングする際に、グラデーションを使っていたりするとコードが長いしブラウザごとの記述が面倒に感じることがあります。
「CSS3Ps」を使うと選択したオブジェクトのCSS3をコードとして出力できるのでとても作業効率がよくなります。
それでは使い方をご紹介します。

http://css3ps.com/
まずはサイトからプラグインをダウンロードし、インストールします。

承認する」をクリック。

インストール」をクリックします。

インストールが完了しました。
Photoshopを開きます。

「ウィンドウ」→「エクステンション」→「CSS3Ps」を選択します。

「CSS3Ps」が開きました。
それではいくつかオブジェクトを作成してみましょう。

今回は「box-shadow」、「gradient」、「border-radius」を使った3つのオブジェクトを使用します。
やり方はとても簡単で、CSS3を出力したいオブジェクトのレイヤーをすべて選択し、「CSS3Ps」パネルをクリックするだけです。

出力したいオブジェクトのレイヤーを選択し、

「CSS3Ps」パネルをクリック!

するとサイトにジャンプし、選択したオブジェクトのコードが出力されます。
CSSハックもしっかり記述されているのでコピペでそのまま使用できます。

まとめ

このプラグインを使えばコーディングがとても楽になりますね。
使いこなせば作業効率のアップが見込めます。是非お試し下さい。