ドロップシャドウを適用する最良の方法は何ですか？

Question

ドロップシャドウを適用する最良の方法は何ですか？私は今、彼らがたくさんいるサイトに取り組んでいますが、最善の方法を見つけるために戦っています。このサイトはかなりアニメーションが重いので、影はこれでうまく機能する必要があります。

jQueryシャドウパルギンを試しました。影は見栄えがよく、使いやすいものでしたが、遅く、どのアニメーションでもうまく機能しませんでした（多くの再描画が必要で、非常にジョギー）。

また、いくつかの灰色のdivで要素をラップし、シャドウ効果を与えるためにそれらを少しオフセットする独自のjQuery拡張機能を作成しようとしました。これはうまくいきました。アニメーションにすばやく反応します。ただし、すべてがこれらのシャドウdivにラップされるため、DOM操作/トラバーサルが面倒になります。

もっと良い方法がなければならないことは知っていますが、これは私の得意ではありません。思考？

Answer 1

ShadedBorder は、見栄えがよく、使いやすいShadow-Libraryです。確認してください

Answer 2

これらのシャドウdivを他のコンテンツの周りにラップする必要はありません。少し斜めに設定して、より低いz-indexに配置するだけです！-）

Answer 3

主な問題がDOMをナビゲートすることである場合は、クラスおよび/またはidを要素に追加し、JQueryセレクターでそれを参照します。 refを変数に保存すればさらに良いので、あまり頻繁に選択する必要はありません

Answer 4

ブラウザ間の完全なサポートはまだありませんが、を使用してみてください。 CSS 3のtext-shadowプロパティ。

Answer 5

これは、画像を変更する必要がある頻度と、画像がカバーする色付き領域に大きく依存します。 IE6への準拠に注意を払う必要があると推測しているため、ほとんどのalpha-PNGソリューションは、予想以上にパフォーマンスの最適化に多くの時間を費やすほどの恐ろしいジッターを引き起こします。

過去にこれを解決するために、画像は月に1回未満しか変更されないため、事前に定義された背景色を使用して影を自動的に適用するキャッシングPHPスクリプトを使用して画像を呼び出します。透明度に依存します。これにより、ダウンロードの高速化（HTTPリクエストの減少）とインターフェイスの高速化が実現します。これは、動作中のJavascript / CSSマジックが少ないためです。

これは非常に古い学校のソリューションであり、画像が静的であれば上記のソリューションは完全に受け入れられることを理解していますが、クロスブラウザに準拠しアニメーション化すると、このスタイルのソリューションを実行することを余儀なくされる可能性があります