[Fireworks]線つき矩形の角丸をキレイに見せる方法

こんばんは、@cappeeです。

Fireworksで角丸のボタンをデザインするときに、外側に線を引いて、更に内側に1pxの線を引きたい場合のお話。

結論から言うと、一番外側の線を「内側」もしくは「中央」指定にすると角丸がジャギってしまうんです。①だけジャギっているのわかりますか?

kadomaru [Fireworks]線つき矩形の角丸をキレイに見せる方法

わかりやすいように拡大。

kadomaru2 [Fireworks]線つき矩形の角丸をキレイに見せる方法

こういうボタンを作りたい場合の一番角丸がキレイで簡単な方法は、

  1. 作りたいボタンのサイズから-2pxした矩形を作成。
  2. 一番外側の濃い線は「外側」指定してカラーを選択。
  3. 同じ矩形を複製して薄い線を「内側」指定して中にグラデーションをかける。

という具合です!

「Photoshopライブ効果」を使った方法

線を指定するには上記以外にも「Photoshopライブ効果」を使った方法もあります。「Photoshopライブ効果」の「線」の「内側」は角丸がキレイに表示されるのでこちらでも線分の幅を調整しなくてもいいので便利です。だた、上記のように二重線を引きたい場合は、「Photoshopライブ効果」の「外側」と通常の線の「内側」を指定する必要がありますが、矩形を複製せずに簡単にできるので追加でご紹介します。(2012.12.17追記)

  1. 作りたいボタンのサイズから-2pxした矩形を作成。
  2. 一番外側の濃い線は「Photoshopライブ効果」の「線」の「外側」指定してカラーを選択。
  3. 薄い線は通常の線の「内側」を指定して中にグラデーションをかける。

ちなみに、線自体にグラデーションがかけられる機能Fireworksにも早くほしいですよね。IllustratorにはCS6から新機能としてあるみたいですけどっ。

Pocket
article clipper [Fireworks]線つき矩形の角丸をキレイに見せる方法

最新FirefoxとOperaではCSS3のシャドウと角丸はプレフィックスいらないよ

こんにちは、@cappeeです。

コーディングしていた時に最新のFirefoxとOperaでシャドウがかかってませんでした。

あれって思って調べたら、-moz-や-o-のプレフィックスって最新だと逆に効かないんですね。

どうやら角丸もそのよう。

幅広く古いバージョンにも対応させるならこのように書くってことですね。

シャドウ

box-shadow: 1px 1px 5px #999;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
-o-box-shadow: 1px 1px 5px #999;
-ms-box-shadow: 1px 1px 5px #999;

角丸

border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;

 

こちらに色々と検証した記事がありますのでぜひ。

box-shadow,border-radiusを書くときにCSS3のベンダープレフィックスは要らない

 

Pocket
article clipper 最新FirefoxとOperaではCSS3のシャドウと角丸はプレフィックスいらないよ