Какой лучший способ нанести тень?

Question

Какой метод нанесения теней лучше? Я сейчас работаю над сайтом, на котором их много, но я боролся за то, чтобы найти лучший способ сделать это. На сайте довольно много анимации, поэтому тени должны хорошо с этим работать.

Я попробовал jQuery shadow pulgin. Тени выглядели хорошо и были просты в использовании, но были медленными и плохо работали с любой анимацией (требовалось много перерисовок, очень бегло).

Я также попытался создать свое собственное расширение jQuery, которое оборачивает мой элемент в пару серых делителей, а затем немного смещает их, чтобы создать эффект тени. Это сработало хорошо. Это быстро и реагирует на анимацию. Однако это делает манипулирование / обход DOM громоздким, поскольку все находится в этих теневых элементах.

Я знаю, что должен быть лучший путь, но это не совсем моя сильная сторона. Мысли?

Answer 1

ShadedBorder - это красивый и простой в использовании Shadow-Library. проверить это

Answer 2

Вам не нужно оборачивать эти теневые делители вокруг другого контента, просто установите их немного косо и поместите их в более низкий z-индекс! -)

Answer 3

Это в значительной степени зависит от того, как часто ваши изображения должны будут меняться, и цветных областей, которые они будут покрывать. Поскольку я предполагаю, что вам нужно будет обратить внимание на соответствие IE6, большинство альфа-PNG-решений приведут к такому ужасному колебанию, что вы потратите больше времени на оптимизацию производительности, чем хотели бы предположить.

Чтобы решить эту проблему в прошлом, поскольку наши изображения изменяются реже одного раза в месяц, мы вызываем изображения с помощью сценария caching-PHP, который автоматически применяет тень, используя предопределенный цвет фона, поэтому нам не нужно полагаться на любую прозрачность. Это приводит к более быстрой загрузке (меньше HTTP-запросов) и более быстрому интерфейсу, потому что в работе меньше волшебства Javascript / CSS.

Я понимаю, что это решение очень старой школы, и вышеприведенные решения были бы вполне приемлемыми, если бы ваши изображения были статичными, но совместимость с различными браузерами и анимация, скорее всего, заставят вас принять решение этого стиля. 1005 *

Answer 4

Несмотря на то, что он еще не полностью поддерживает браузер, вы можете попробовать использовать CSS 3 text-shadow свойство .

Answer 5

если ваша основная проблема заключается в навигации по DOM, просто добавьте класс и / или идентификатор к вашему элементу и передайте его с помощью селекторов JQuery. даже лучше, если вы сохраните ссылку в переменной, поэтому вам не нужно будет выбирать ее слишком часто