4

私は、デザイナーから psd レイアウトをさいの目に切ってスライスしている最中です。デザインは 960 グリッド システムに基づいており、複数のボックス (トップ メニュー用の 960 ピクセル ボックス、2 つのコンテンツ エリア用の 2 つの 460 ピクセル ボックス、別のコンテンツ セットアップ オプション用の 220 ピクセルと 720 ピクセルなど) で構成されています。これらのボックスはすべて無地の背景色 (本体) に基づいていますが、すべて丸みを帯びた角と約 10 ピクセルの境界線があり、グラデーションになっています。

私は、もちろん検証する必要があること、素敵なセマンティクスなどを念頭に置きながら、ここで取るべき最善の方法を検討しています。

アイデア/入力はありますか？

4

3 に答える 3

7

私は、もちろん検証する必要があること、素敵なセマンティクスなどを念頭に置きながら、ここで取るべき最善の方法を検討しています。

ここでとるべき最善の方法は、純粋な CSS3 を使用して丸みを帯びた角とグラデーションを追加することです。

利点：

  • 追加の、意味的に無意味な、くだらないマークアップは必要ありません
  • 画像不要
  • 実装と保守が容易
  • CSS3 をサポートしていない古いブラウザーのグレースフル デグレード機能

欠点: _

  • まだすべてのブラウザで動作するわけではありません

それは本当にあなた次第です。

サイトをすべてのブラウザーでまったく同じように表示したい場合、CSS3 はオプションではありません。メンテナンスが難しい画像と肥大化したマークアップに頼る必要があります。

ただし、古いブラウザーのユーザーに、少し異なるがそれでも優れたデザインを提供することを気にしない場合は、CSS3 を使用することをお勧めします。

「CSS3」グラデーション:

CSS3 丸みを帯びた角:

于 2010-01-17T13:25:23.190 に答える
1

これは、IE6 以降のすべての Web ブラウザーで、CSSのみで問題なく動作するわけではありません。JavaScript をすべてのブラウザーで動作させるには、JavaScript を取得する必要があります。追加の画像や CSS なしで、すべての Web ブラウザーで動作する、その場でコーナーを丸めることができるjQueryプラグインがあります。私はこの jQuery Corner pluginで良い経験をしました。

于 2010-01-17T13:58:03.473 に答える
0

JavaScript ライブラリ DD_roundies ( http://www.dillerdesign.com/experiment/DD_roundies/ ) を試すことをお勧めします。ほとんどのブラウザーは、CSS3 で指定されているように角丸を既にサポートしており、DD_roundies は (IE などの) サポートしていないブラウザーのサポートも追加します。

于 2010-01-17T13:30:19.357 に答える