CSS shadow Effect (Box Shadow)

December 23, 2011 // In: CSS
Today, We’ll discuss about Shadow effects on block-level elements (like div).. As in my previous post Text Effects Using CSS, we’ve discussed that now, there is no need to use photoshop to apply 3D effects, Similarly we don’t need to use photoshop to drop shadows. we can easily cast shadow on block-level elements using CSS3.
Lets have a look on the basic CSS sample..

You can apply Outer and Inner Shadow, Lets try three examples, two for Outer Shadow and another for Inner Shadow.

Outer Shadow
Example 1:

Demo:

Example 2:

Demo: 


Inner Shadow

Example:

Demo:

Simple Login Page using CSS and Jquery
Text Effects Using CSS3