Quelle est la meilleure façon d'appliquer une ombre portée?

Question

Quelle est la meilleure méthode pour appliquer des ombres portées? Je travaille actuellement sur un site où nous en avons beaucoup, mais je me suis battu pour trouver la meilleure méthode pour le faire. Le site est assez animé, donc les ombres doivent bien fonctionner avec ça.

J'ai essayé une pulgin d'ombre jQuery. Les ombres avaient l'air bien et étaient faciles à utiliser mais étaient lentes et ne fonctionnaient pas bien avec les animations (beaucoup de redessin nécessaire, très joggy).

J'ai également essayé de créer ma propre extension jQuery qui enveloppe mon élément en deux divs gris et les décale un peu pour donner un effet d'ombre. Cela a bien fonctionné. C'est rapide et réactif à l'animation. Cependant, il rend la manipulation/traversée DOM lourde car tout est enveloppé dans ces divs d'ombre.

Je sais qu'il doit y avoir un meilleur moyen mais ce n'est pas exactement mon fort. Pensées?

Answer 1

ShadedBorder est une bibliothèque Shadow bien conçue et facile à utiliser. check it out

Answer 2

Si votre problème principal est de naviguer dans le DOM, ajoutez simplement une classe et/ou un identifiant à votre élément, et référez-le avec les sélecteurs JQuery. encore mieux si vous stockez l'objet ref dans une variable, vous n'avez donc pas besoin de le sélectionner trop souvent.

Answer 3

Vous n'avez pas besoin d'envelopper ces séparations d'ombre autour des autres contenus, il suffit de les positionner un peu en biais et de les placer les sur un z-index inférieur! -)

Answer 4

Bien qu'il ne soit pas encore pris en charge par tous les navigateurs, vous pouvez essayer d'utiliser le CSS 3 text-shadow property.

Answer 5

Cela dépend en grande partie de la fréquence à laquelle vos images doivent être modifiées et des zones colorées qu'elles couvrent. Parce que je devine que vous devrez faire attention à la conformité IE6, la plupart des solutions alpha-PNG provoqueront une telle horreur que vous passerez plus de temps dans l'optimisation des performances que vous auriez voulu deviner. Pour résoudre ce problème dans le passé, comme nos images sont modifiées moins d'une fois par mois, nous appelons les images via un script PHP de mise en cache qui applique automatiquement l'ombre en utilisant une couleur d'arrière-plan prédéfinie afin que nous n'ayons pas compter sur toute transparence. Cela se traduit par des téléchargements plus rapides (moins de requêtes HTTP) et une interface plus rapide car il y a moins de magie Javascript/CSS dans les travaux. Je comprends que c'est une solution très old-school, et les solutions ci-dessus seraient tout à fait acceptables si vos images étaient statiques, mais être compatible avec les navigateurs et animés vous obligera probablement à faire une solution de ce style.