Jump to content

Giving a <div> element a dropshadow


thundercade64
 Share

Recommended Posts

I can't quite figure out how to give a div element a dropshadow. All I've been able to do is give everything inside of the div (text and all) a dropshadow, that doesn't show up beyond the borders of the div. I need the exact oppposite of that - the div having a shadow, that only shows up outside of the div space, over the background of the page.Any suggestions?

Link to comment
Share on other sites

create 2 divs, one on top of another, slightly move the bottom one from under the top one and give it a grey appearance.

<head><style>.out {  display:block;   background:#bbb;   border:1px solid #ddd;   position:relative;  margin:1em 0;  }.in {  text-align:center;   background:#fff;   border:1px solid #555;   position:relative;   padding:5px;  font-weight:normal;  }.ltin {  left:-5px;  }.tpin {  top:-5px;  }.narrow {width:8em;} /* change to suit */h4 {font-weight:bold; color:#000;}</style></head><body><div class="out narrow">  <div class="in ltin tpin">    <h4>Narrow</h4>    <p>This is the text that goes in the middle.</p>  </div></div>

Link to comment
Share on other sites

Thanks, that works pretty well.Now I'm trying to find a way to have the shadow portion be semi transparent over the background of the page. I've tried using some filter properties that I looked up on this site (opacity), but nothing seems to have any effect.  Is there a way to do this?

There is. :)
#d1{width: 100%; /* MSIE needs this */filter: alpha(opacity=50); /* for MSIE */opacity: 0.5;  /* for Gecko browsers */background-color: #CCFFCC;color: inherit;}<div id="d1">Div with opaque color</div>

real browsers opacity values are from 0.0 to 1.0 MSIE opacity values are from 0 to 100.MSIE has strange needs: either width or height value of the element must be setted to get color as opaque.Seems at opacity not working with Opera (yet), or then there is somethingthat I don't know within Opera and opaque color. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...