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

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

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

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

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

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

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

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

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

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

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

完成図

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

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

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

ぜひ、お試しあれ!!

デバック用: FB:0 TW:0 Po:0 B:0 G+:0 Pin:0 L:0

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

コメント

2013年7月10日5:50 AM | Dreamweaver CC 新機能 CSS デザイナー pcmanabu

  • […] FireworksやCSS3 GENERATORを使えば、問題なく、実現できていましたが、DW単体で実現可能になりました。 […]

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    トラックバックURL:https://pcmanabu.com/fireworks-cs6%e3%81%ae%e8%b6%85%e3%82%b9%e3%82%b4%e3%82%a4%e6%a9%9f%e8%83%bd-css3%e3%81%ae%e8%87%aa%e5%8b%95%e7%94%9f%e6%88%90/trackback/