Какой лучший способ нанести тень?
-
04-07-2019 - |
Вопрос
Какой метод нанесения теней лучше? Я сейчас работаю над сайтом, на котором их много, но я боролся за то, чтобы найти лучший способ сделать это. На сайте довольно много анимации, поэтому тени должны хорошо с этим работать.
Я попробовал jQuery shadow pulgin. Тени выглядели хорошо и были просты в использовании, но были медленными и не работали хорошо с любой анимацией (требовалось много перерисовок, очень бегать).
Я также попытался создать свое собственное расширение jQuery, которое оборачивает мой элемент в пару серых делителей, а затем немного смещает их, чтобы создать эффект тени. Это сработало хорошо. Это быстро и реагирует на анимацию. Тем не менее, это делает манипулирование / обход DOM громоздким, поскольку все окружено этими теневыми элементами.
Я знаю, что должен быть лучший способ, но это не совсем моя сильная сторона. Мысли?
Решение
ShadedBorder - это красивый и простой в использовании Shadow-Library. проверить это
Другие советы
Вам не нужно оборачивать эти теневые делители вокруг другого контента, просто установите их немного косо и поместите их в более низкий z-индекс! -)
если ваша основная проблема заключается в навигации по DOM, просто добавьте класс и / или идентификатор в ваш элемент и передайте его с помощью селекторов JQuery. даже лучше, если вы сохраните ссылку в переменной, поэтому вам не нужно будет выбирать ее слишком часто
Несмотря на то, что он еще не имеет полной поддержки различных браузеров, вы можете попробовать использовать CSS 3 text-shadow свойство .
Это во многом зависит от того, как часто ваши изображения должны будут меняться, и цветных областей, которые они будут покрывать. Поскольку я предполагаю, что вам нужно будет обратить внимание на соответствие IE6, большинство альфа-PNG-решений приведут к такому ужасному колебанию, что вы потратите больше времени на оптимизацию производительности, чем хотели бы предположить. р>
Чтобы решить эту проблему в прошлом, поскольку наши изображения изменяются реже одного раза в месяц, мы вызываем изображения с помощью сценария caching-PHP, который автоматически применяет тень, используя предопределенный цвет фона, поэтому нам не нужно полагаться на любую прозрачность. Это приводит к более быстрой загрузке (меньше HTTP-запросов) и более быстрому интерфейсу, потому что в работе меньше волшебства Javascript / CSS.
Я понимаю, что это очень старомодное решение, и приведенные выше решения были бы вполне приемлемыми, если бы ваши изображения были статичными, но совместимость с различными браузерами и анимация, скорее всего, заставят вас принять решение в этом стиле. р>