thundercade64 Posted March 21, 2006 Share Posted March 21, 2006 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 More sharing options...
scott100 Posted March 21, 2006 Share Posted March 21, 2006 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 More sharing options...
thundercade64 Posted March 22, 2006 Author Share Posted March 22, 2006 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? Link to comment Share on other sites More sharing options...
raimo Posted March 22, 2006 Share Posted March 22, 2006 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?<{POST_SNAPBACK}> 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 More sharing options...
Jonas Posted March 22, 2006 Share Posted March 22, 2006 Opera 9.0 will support Opacity.Ctrl+F "Display", first list item under. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now