Another quick tut. Here is something simple and nice using the POWER of CSS… but was difficult concieve( and it surely wasn’t me) to begin with . Adding Dropshadow, might be a peice of cake for many of us, using some image editing tools like Photoshop anf Fireworks etc.
The reason why , I opted for drop shadow using CSS is that , usually while creating a page design/html of an application , the requirements keep iterating. What I mean is , In a existing web site with many images, like the ones displaying freinds list or an image gallery, it will be difficult to reprocess the entire load of images that had been already unloaded to add or remove the shadows, for that matter.
So If you have done a little forward thinking while creating the HTMLS to add these extra divisions or usually the situation is that you have a Loop Logic generating these icons/thumbnails in XSL, PHP. JAVA or any other programming /scripting language, you can add it anytime, then is just the matter of show and hiding these shadows using the CSS Display property,as per the clients ever changing requirements … I havn’t done this sort of forward thinking before this … but ahev started now!
In the example below, the original image is shadow free and the dropshadows are applied as required! ALSO, I have gone a little extra, by using the tricks of my earlier Tut ( Well! these probably are shortest variety of Tutorials , so it is only justified calling them “Tut”‘s ) about Using CSS Clip Property for show off only
Original Image
