Okay Im trying to add a drop shadow behind the rounded corners element on this page: Http://www.lindleywooddevelopment.com/resume.php What is the most effective way to achieve this? (keeping cross-browser compatibility in mind) Most of the methods Ive been able to find on google appear to be outdated and IMO inefficient... help!
Hello IanT, The easiest & the most cross browser method you will find out there is if you do it using an image (using photoshop or Gimp) you can easily achieve this. If you insist on using CSS 3 please note that it will work mainly in modern web browsers that are able to parse CSS3 well . i.e. Internet Explorer 8+ , FF 3+ , etc. Here is an example: .boxShadow { background-color: #F4F4F4; border: 1px solid #CCC; padding: 10px; -moz-box-shadow: 7px 7px 7px #666; -webkit-box-shadow: 7px 7px 7px #666; box-shadow: 7px 7px 7px #666; } Code (markup):
Yeah I agree. The easiest way is the ugly solution where you, just as itmontreal.ca said, use images in the background to achieve the effect.
well i will suggest you to apply shadow effect in the template ,when u r designing it at that time use drop shadow..in this way you have to make three parts of your inner container and apply the top and bottom container with the shadow effect..
Thanks! sorry it took me so long to respond, work has been nuts! I am going to give it a try and see what happens... I'm going to fool around with it..... ... Okay so how might one use images for the shadows? (As in what dimensions would I need to use for the size of the images etc... here is an example page: http://www.lindleywooddevelopment.com/resume.php I would want to try to put a drop shadow on the lighter rounded container, but I dont know the exact dimensions to make it... or would I just make a flat shadowed image, contained in a slightly offset displayed div (also how would i do that? padding? margin?), then make that div repeat said image with repeat-y ??