Designers Sanctuary vs Slicers Nightmare

Whilst I was recently slicing a site, I was confronted with some funky gradients and drop shadows. Now don’t get me wrong, these features really do bring out a design, however deem tricky and fiddly to slice. It was this repetitive slice procedure that made me Google around for a quicker alternative that could be reused (even by a CMS for clients).

jQuery has a nifty wrap() function which takes in a string or object to generate a structure wrap of HTML around the matched elements. With this wrap() function, we could use some nested sliced DIV’s with gradient backgrounds to create a shadow effect wrapped around an image. 

Reference for background images: http://15daysofjquery.com/examples/osds/ 

Therefore, after placing a class of dropshadow on any image requiring a drop shadow, the output HTML would render as:

Example: