Designers Sanctuary vs Slicers Nightmare
They’ve done it again haven’t they? You’ve just been briefed on a new project, had a peek at the designs and it’s drop shadow-ville! Never fear, jQuery is here.
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:
