Contact Us

|

FriendFeed FriendFeed

|

follow us on twitter Twitter

|

 Rss Feed

|

Favorites Add to Favorites

Thursday, June 25, 2009

How to give shadow to a div using css

Here is a simple example which tell you how to give shadow to a div...

Example:
HTML:
<div class="box-outer">
<div class="box-inner">
text

</div>
</div>

CSS:
.box-inner {
position:relative;
top:-3px;
left:-3px;
height:150px;
background:#aa0000;
}
.box-outer {
width:150px;
height:150px;
background:#333;
}

The result will show you a red box with black shadow as shown in the image. When you increase the width of the box-outer, automatically the width of the box-inner will be increased.



Hope this example will help you...

Labels:

3 Comments:

Anonymous Anonymous said...

its cheating

June 25, 2009 at 11:47:00 PM PDT  
Anonymous Anonymous said...

Its work fine for me... thanks.

June 26, 2009 at 11:07:00 PM PDT  
Anonymous Anonymous said...

Cheating?!? Give me a break - it gets the job done. I didn't know we were keeping score

July 14, 2009 at 9:33:00 PM PDT  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home