How to insert a shadow below the slider - html

Question

I have the following slider in my asp.net page:
<div class="sliderContent">
<div id="sliderFrame">
<div id="slideIT" class="sliderHolderMain">
<div u="slides" class="sliderHolder">
<div>
<img u="image" src="theImages/slider/1.jpg" />
<div u="caption" t="CLIP|L" class="sliderCapMain">
<div class="sliderCapBG"></div>
<div class="sliderCapText">
<span class="sliderCapTextHdr">Healthy Cooking</span>
<br />
<span class="sliderCapTextFtr">Discover simple solutions to cook delicious and healthy meals for you and your family. Cooking tips, how-to guides and more!</span>
</div>
</div>
</div>
<div>
<img u="image" src="theImages/slider/2.jpg" />
<div u="caption" t="CLIP|L" class="sliderCapMain">
<div class="sliderCapBG"></div>
<div class="sliderCapText">
<span class="sliderCapTextHdr">Healthy Cooking</span>
<br />
<span class="sliderCapTextFtr">Discover simple solutions to cook delicious and healthy meals for you and your family. Cooking tips, how-to guides and more!</span>
</div>
</div>
</div>
</div>
</div>
<div style="width: 1100px; min-width: 1000px; height: 10px; background: url(theImages/dropShadow.png) repeat-x; position: relative; margin: 0 auto; bottom: 0;"></div>
</div>
</div>
CSS:
.sliderContent
{
width: 100%;
overflow: hidden;
margin: 0 auto;
text-align: center;
}
#sliderFrame
{
position: relative;
width: 100%;
margin: 0 auto; /*center-aligned*/
}
.sliderHolderMain
{
position: relative;
margin: 0px;
padding: 0px;
float: left;
top: 0px;
left: 0px;
width: 1100px;
height: 337px;
overflow: hidden;
}
.sliderHolder
{
cursor: move;
position: absolute;
left: 0px;
top: 0px;
width: 1100px;
height: 337px;
overflow: hidden;
}
.sliderCapMain
{
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 337px;
text-align: center;
}
.sliderCapBG
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.75);
filter: alpha(opacity=75);
}
.sliderCapText
{
position: absolute;
top: 5%;
left: 5%;
color: #000;
text-align: left;
}
.sliderCapTextHdr
{
color: #0074C9;
font-weight: normal;
}
.sliderCapTextFtr
{
color: #000;
font-size: small;
}
Attached image of what it looks like:
As you can see the shadow is at the top of the slider pointed by the red arrow.
How can I modify the CSS so it appears below the slider, giving it a 3D view

Answer 1

2 ways: in your HTML, you have an inline style (eeeeew!!!) as follows:
<div style="width: 1100px; min-width: 1000px; height: 10px; background: url(theImages/dropShadow.png) repeat-x; position: relative; margin: 0 auto; bottom: 0;"></div>
and at the same time, your slider has a fixed height, so it's really easy to know the size.
So you can do the following:
1) remove the inline styles. Really.
2) add a class to that div, let's say .shadow
3) add the following styles to your CSS style sheet:
.shadow{
width: 1100px;
min-width: 1000px;
height: 10px;
position: relative;
margin: 0px auto;
top: 327px; //it was originally 327 but corrected to 337
background: url('theImages/dropShadow.png') repeat-x scroll 0% 0% transparent;
}
3.a) now you can use what you have now, which is a .png image (but you'll have to flip it vertically)
3.b) or you can use box-shadow property:
.shadow{
width: 1100px;
min-width: 1000px;
height: 10px;
position: relative;
margin: 0px auto;
top: 327px; //it was originally 327 but corrected to 337
box-shadow: -20px -5px 6px rgba(0, 0, 0, 0.75) inset;
}
EDIT: I see you edited my answer and somehow the edit was approved, but the edit is incorrect, so I'll explain it so you also understand how it works: the top position is the height of the container element (337px) minus the height of the div with the shadow (10px), so position is 327px. If you want a shadow div with (say) 50px height, then position would be 287px (337-50) and so on. Explaining this because this answer may be of help for you but also for other people as well, and having this corrected would end with the whole solution not working (literally disappearing off sight)