son Posted February 12, 2009 Share Posted February 12, 2009 Have build a web page which has a container with a very light background. The body itself is white. To make the container stand out a bit better I added a border, which is a bit to harsh. I wondered how you would go ahead to add some sort of light shadow to container?Son Link to comment Share on other sites More sharing options...
aalbetski Posted February 12, 2009 Share Posted February 12, 2009 its not a true shadow, but you may be able to something close with just adjusting the width and colors of each border side <div style="border-top: 1px lightgrey solid;border-left:1px solid lightgrey;border-right:2px solid black;border-bottom:2px solid black">This is a div</div> Link to comment Share on other sites More sharing options...
son Posted February 12, 2009 Author Share Posted February 12, 2009 its not a true shadow, but you may be able to something close with just adjusting the width and colors of each border side<div style="border-top: 1px lightgrey solid;border-left:1px solid lightgrey;border-right:2px solid black;border-bottom:2px solid black">This is a div</div> Thanks. This is what I tried before, but it still seems a bit harsh for the web page I designed. I have seen some websites in the past (wish I would remember now where) that used some sort of bg image that looked like a shadow. Not sure how I would do that...Son Link to comment Share on other sites More sharing options...
aalbetski Posted February 12, 2009 Share Posted February 12, 2009 heres a true shadow using CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <body> <div style="position:relative;height:200px;width:200px;background-color:white;border:1px solid black;z-index:2"></div> <div style="position:relative;height:200px;width:200px;background-color:gainsboro;left:6px;top:-195px;z-index:1"></div> </body></html> Link to comment Share on other sites More sharing options...
son Posted February 17, 2009 Author Share Posted February 17, 2009 heres a true shadow using CSS<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <body> <div style="position:relative;height:200px;width:200px;background-color:white;border:1px solid black;z-index:2"></div> <div style="position:relative;height:200px;width:200px;background-color:gainsboro;left:6px;top:-195px;z-index:1"></div> </body></html> Thanks a lot for your code. This one is great!Cheers,Son Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.