Fireworks CS6の超スゴイ機能 CSS3の自動生成

Fireworks CS6では、グラデーションのあるボタンを瞬時にCSS3で出力できます。

この機能を使うことにより、画像を使わずに文字列だけで、グラデーションボタンを作成できます。

グラデーションボタンからCSS3を出力する方法

STEP1 グラデーションボタンを作成

(1)ツールボックスの「ベクトル」から長方形ツールを選択します。

(2)ドラックして長方形を記述

(3)必要に応じてプロパティインスペクタで設定する

今回は、幅を100px、高さを50px、角丸の半径を50%としました

(4)右側のスタイルからグラデーションを選択

今回は、「スタイル」⇒「パステル」⇒任意のスタイルと選択

完成図

STEP2 スタイルシートをコピーする

メニューバーの「ウィンドウ」から「CSSプロパティ」を選択。(またはCtrl+F7でも可)

あとは、「すべて」ボタンを選択し、コピーしてCSSとして反映させるだけです。

ぜひ、お試しあれ!!

   このエントリーをはてなブックマークに追加