2

HTMLが流動的である可能性があるHTMLの周りにドロップシャドウを作成するためのベストプラクティスは何ですか?

以前はテーブルを使用していて、外側の8つのセルのそれぞれの背景として8つのpng画像(4つの側面と4つの角)があり、中央のセルにドロップシャドウが必要です。あまりセマンティックではありませんが、少なくともドロップシャドウの画像は背景であり、流動的でした... htmlは醜く、退屈で、SEOにあまり適していませんでした。

現在、より互換性のある(ブラウザーの問題が発生したことをまったく覚えていませんが)方法はありますか、それともこれを処理するためのよりセマンティックな方法がありますか?

IE6は気にしません。私はjqueryを使用しているので、最新のブラウザー間で互換性の問題がない限り、javascript/jqueryメカニズムで問題ありません。

更新:CSS3のボックスシャドウを使用するという提案は素晴らしかった。唯一の問題は、適用されるhtml要素と同じサイズのボックスシャドウのみを実行することです。つまり、これは、(光源が真上にあるかのように)ドロップシャドウを周囲に配置できないことを意味します。少し大きい周囲のdivを追加できます。しかし、次に何が起こるかというと、境界半径によって、白いアーティファクトがコーナーに表示されます...

HTML要素からオフセットするだけでなく、HTML要素の周囲全体に素敵な黒い影を付ける方法はありますか?

更新2:CSS3のボックスシャドウとfirefox / webkitの実装はすべて、私が望むものを可能にするスプレッド値をサポートしています。以下のdynamicdrive.comリンクにはありませんでした。ありがとうございました。

4

2 に答える 2

7

IE7 / 8を無視し、ボックスシャドウCSS3ルールを使用します。影の欠如は、これらのレガシーブラウザの世界の終わりではありません。そうである場合は、それに応じて課金します。IE独自のドロップシャドウフィルターを調べて、結果が妥当かどうかを確認することもできます。

その他のリソース:こちら

w3cワーキングドラフト定義:ここ

于 2010-08-31T09:58:26.590 に答える
1

jQueryドロップシャドウのプラグインを試すことができます。

ただし、パフォーマンスに多少の影響があり、低速のクライアントマシンの複数の要素で時間がかかります。私たちの会社のサイトでは、明らかにIEでは機能しなかったCSS3ルートを使用しましたが、どんな好みの人でもFFを使用します:)。IGNなどの大規模なサイトの多くは、クライアントがCSS3シャドウをサポートできる場合は、それ以外の場合はタフなチーズと同様のアプローチを採用しています。

于 2010-08-31T10:02:34.523 に答える