How did the guys at DeviantArt implemented the Shadowing in their images?

Question

Hi guys,

I just want to know how the guys at DeviantArt.com implemented the shadowing on each images.

If you look at the thumbnails, you'll see that the images are shadowed a bit. I think they done it with Javascript because when I turned off my Javascript the shadows were gone. And they are also using jQuery btw.

Answer 1

I believe its on the server side.

If you see: http://sh.deviantart.com/x/170/100/logo3.png

You can change the 'variables' to fit your dimensions.

Then I guess its just a background property on the image with some padding to place the image in the center.

Answer 2

Their javascript is obfuscated so it's pretty difficult to follow what's going on. If you inspect their images, you can see that they're encapsulated with a span with a class named "shadow" and it has a style of a background image like such :

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

---

But if you are looking for a client side way of adding shadows to images, check out this script: http://www.netzgesta.de/corner/

Answer 3

Use FireBug to inspect the thumnail and you will see that the thumbnail is in a span element that has style="background-image: url(http://sh.deviantart.com/x/150/100/logo3.png);"

So basically there's span with a image background that mimics the shadow.