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...
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: shadow div
3 Comments:
its cheating
Its work fine for me... thanks.
Cheating?!? Give me a break - it gets the job done. I didn't know we were keeping score
Post a Comment
Subscribe to Post Comments [Atom]
<< Home