Vince Scordino Team : Web Development Tags : Web Development

Designers Sanctuary vs Slicers Nightmare

Vince Scordino Team : Web Development Tags : Web Development

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: 


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