Have Geek Brain

How has DeviantArt implemented Shadowing in its images?

I just want to know how DeviantArt.com has implemented shading on each image.

If you look at the thumbnails, you will see that the images are slightly shaded. I think they did it with Javascript because when I turned off my Javascript the shadows disappeared. And they use jQuery btw as well.

+1


a source to share


3 answers


I believe this is server side.

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



You can change "variables" according to your measurements.

Then I think it is just a property of the background on the image with some addition to put the image in the center.

+4


a source


Their javascript is convoluted, so it's quite difficult to keep track of what's going on. If you check their images, you can see that they are encapsulated with a span with a class named "shadow" and it has a background image style:

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


But if you're looking for a client-side way to add shadows to images, check out this script: http://www.netzgesta.de/corner/

+3


a source


Use FireBug to inspect the thumnail and you can 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 there is basically a gap with the background of the image that simulates a shadow.

+1


a source






More articles:


All Articles