Как DeviantArt реализовал Shadowing в своих изображениях?

Question

Я просто хочу знать, как DeviantArt.com реализовал затенение для каждого изображения.

Если вы посмотрите на миниатюры, вы увидите, что изображения немного затенены. Я думаю, что они сделали это с помощью Javascript, потому что, когда я выключил свой Javascript, тени исчезли. И они также используют JQuery кстати.

Answer 1

Я считаю, что на стороне сервера.

Если вы видите: http://sh.deviantart.com/x/170/100/logo3.png

Вы можете изменить «переменные» в соответствии с вашими размерами.

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

Answer 2

Их javascript запутан, поэтому довольно сложно следить за тем, что происходит. Если вы осмотрите их изображения, вы увидите, что они инкапсулированы в span с классом с именем shadow, и у него есть стиль фонового изображения, например:

<span style="background-image: url(http://sh.deviantart.com/x/150/134/logo3.png);" class="shadow">

---

Но если вы ищете способ добавления теней к изображениям на стороне клиента, проверьте этот скрипт: http://www.netzgesta.de/corner/

Answer 3

Используйте FireBug, чтобы проверить заголовок, и вы увидите, что миниатюра находится в элементе span, который имеет style = "background-image: url (http://sh.deviantart.com/x/150/100/logo3.png);"

Так что, в основном, есть промежуток с фоном изображения, который имитирует тень.