As we promised in earlier post, today we’ll try to present some javascript codes that are enhancing our designs with beautiful drop shadows.

DropShadow

This technique seems to be an improvement of next presented javascript :Onion Skinned Drop Shadows, by removing extra markup needed, and “enables you to apply any number of drop shadows to your site all with one script.”

Onion Skinned Drop Shadows

Some features:

• Automatically expand and contract to fit any object, without specifying widths.
• Allow you to modify the shadow depth with no image manipulation.
• Render the same across all browsers without cutting any corners.

ShadedBorder – JavaScript Round Corners with Drop Shadow

Well, one feature is that script apply shadows to rounded boxes, without images, but the list of what this script can do is big :

• JavaScript-only Photoshop(tm)-like rendering without external images
• Round corners
• Drop shadows
• Glow effects
• Gradient backgrounds
• Graceful degradation – will look ok if JavaScript is turned off
• Borders with different widths and semi-transparency
• Full support for liquid designs
• Anti-Aliasing
• On-hover support
• Disable some of the corners, e.g. bottom-left
• Change borders on-the-fly
• Real transparency – looks perfect on any background
• Cross-Browser: Firefox, Internet Explorer (>=6.0), Safari, Opera (>=9.0)
• Non-obstrusive
• Leight-weight (8.8KB uncompressed)
• Fast (0.5s for the example on a 2.2GHz machine)
• No JavaScript library dependencies

The Shadower – Realistic Drop Shadows in Javascript

Prototype based script, add shadows to draggable boxes.Also allows you to set  distance,angle, shadow steps,opacity,colorattributes of shadow applied.

Glossy.js 

Glossy.js  allows you to add corners and shading and shadow to images on your webpages.