Как лучше всего применить тень?
Как лучше всего наносить тени? Я сейчас работаю над сайтом, где их много, однако я боролся, чтобы найти лучший способ сделать это. Сайт довольно насыщен анимацией, поэтому тени должны хорошо работать с этим.
Я попробовал теневой пулджин jQuery. Тени выглядели хорошо и были просты в использовании, но были медленными и не работали с какой-либо анимацией (требовалось много перерисовки, очень неровно) .
Я также попытался создать собственное расширение jQuery, которое оборачивает мой элемент парой серых div, а затем немного смещает их, чтобы создать эффект тени. Это сработало. Он быстро реагирует на анимацию. Однако это делает манипуляции с DOM / обход громоздкими, поскольку все заключено в эти теневые блоки.
Я знаю, что должен быть способ получше, но это не совсем моя сильная сторона. Мысли?
Вы проверяли stackoverflow.com/questions/165446/…?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
ShadedBorder - это красивая и простая в использовании библиотека теней. проверить это
если ваша основная проблема заключается в навигации по DOM, просто добавьте класс и / или идентификатор к вашему элементу и укажите его с помощью селекторов JQuery. еще лучше, если вы сохраните ссылку в переменной, поэтому вам не нужно выбирать ее слишком часто
Вам не нужно обертывать эти shadow-div вокруг другого контента, просто установите их немного наклонно и поместите на более низкий z-index! -)
Хотя полная кроссбраузерная поддержка еще не реализована, вы можете попробовать использовать CSS 3 свойство text-shadow.
К сожалению, он не поддерживается ни в одной версии IE.
Это во многом зависит от того, как часто нужно будет менять изображения, и от цветных областей, которые они будут покрывать. Поскольку я предполагаю, что вам нужно будет обратить внимание на соответствие IE6, большинство решений альфа-PNG вызовут такую ужасную нервозность, что вы потратите больше времени на оптимизацию производительности, чем вы могли бы предположить.
Чтобы решить эту проблему в прошлом, поскольку наши изображения изменяются менее одного раза в месяц, мы вызываем изображения через скрипт кэширования PHP, который автоматически применяет тень, используя предварительно определенный цвет фона, поэтому нам не нужно полагаться на какие-либо прозрачность. Это приводит к более быстрой загрузке (меньше HTTP-запросов) и более быстрому интерфейсу, потому что в работе меньше магии Javascript / CSS.
Я понимаю, что это очень старомодное решение, и приведенные выше решения были бы вполне приемлемы, если бы ваши изображения были статичными, но кроссбраузерная совместимость и анимация, скорее всего, заставят вас принять решение в этом стиле.
Это одна из тех вещей, которые было слишком сложно заставить эффективно работать во всех браузерах с приличной производительностью. Я надеюсь, что когда IE9 (да, 9) начнет поддерживать CSS3, эта проблема будет решена, но для IE6, IE7 и IE8 это будет довольно сложно.