ドロップ シャドウを適用する最適な方法は何ですか? 私は現在、それらを大量に持っているサイトに取り組んでいますが、それを行うための最良の方法を見つけるために戦っています. このサイトはかなりアニメーションが多いので、影はこれでうまく機能する必要があります.
jQueryシャドウパルジンを試しました。影は見栄えがよく、使いやすかったのですが、遅く、どのアニメーションでもうまく機能しませんでした (多くの再描画が必要で、非常にジョギーが必要でした)。
また、要素をいくつかの灰色の div でラップし、それらを少しオフセットして影の効果を与える独自の jQuery 拡張機能を作成してみました。これはうまくいきました。アニメーションへの応答が速く、迅速です。ただし、すべてがこれらのシャドウ div にラップされているため、DOM 操作/トラバーサルが面倒になります。
もっと良い方法があるはずですが、これは私の得意分野ではありません。考え？
ShadedBorderは見栄えがよく、使いやすい Shadow-Library です。見てみな
これらのシャドウ div を他のコンテンツの周りにラップする必要はありません。それらを少し斜めに設定し、より低い z-index に配置するだけです!-)
まだ完全なクロスブラウザー サポートはありませんが、CSS 3 の text-shadow プロパティを使用してみてください。
主な問題が DOM をナビゲートすることである場合は、クラスや ID を要素に追加し、JQuery セレクターで参照するだけです。ref を変数に格納するとさらに良いので、あまり頻繁に選択する必要はありません
これは、画像を変更する必要がある頻度と、画像がカバーする色付きの領域に大きく依存します。IE6 への準拠に注意を払う必要があると思われるため、ほとんどの alpha-PNG ソリューションは、予想以上にパフォーマンスの最適化に時間を費やすことになる、非常にひどいジッタリングを引き起こします。
過去にこれを解決するために、私たちの画像は月に一度も変更されていないため、事前定義された背景色を使用して自動的に影を適用するキャッシュ PHP スクリプトを介して画像を呼び出します。透明性。これにより、Javascript/CSS マジックが少なくなるため、ダウンロードが高速になり (HTTP 要求が少なくなり)、インターフェースが高速になります。
これは非常に昔ながらの解決策であることを理解しています。画像が静的であれば上記の解決策は完全に受け入れられますが、クロスブラウザーに準拠し、アニメーション化されると、このスタイルの解決策を実行する必要が生じる可能性があります。