On Tue, Jun 29, 2010 at 1:22 PM, Tim Climis <tcli...@exchange.iu.edu> wrote: > > On Monday, June 28, 2010 11:17:28 pm Rebecca Gessler wrote: > > Hi everyone, > > I am trying to add a drop shadow to my container div that has rounded > > corners on the top and bottom. I am using the 960 grid system: > > http://sasmg.org/sasmg/ > > Basically the entire thing should be in a drop shadow (from the tree image > > down to the bottom). I have looked for tutorials online but my case seems > > special due to the rounded corners. > > > > Thank you for any suggestions you can provide, > > Becky G > > CSS 3 is an option that would make this very very easy, but only if you don't > mind not having the drop shadow and rounded corners in any version of IE. > > #container { > position: relative; > overflow: hidden; /* make the container surround the page properly */ > > -moz-border-radius: 20px; /* change this to whatever number you actually > need -- this line is for Firefox */ > -webkit-border-radius: 20px; /* for older versions of Chrome and Safari */ > -khtml-border-radius: 20px; /* for Konqueror */ > border-radius: 20px; /* for newest versions of Chrome, Safari, and Opera, > and future browsers */ > > -moz-box-shadow: 3px 5px 2px #ccc; /* for Firefox */ > -webkit-box-shadow: 3px 5px 2px #ccc; /* for Chrome and Safari */ > box-shadow: 3px 5px 2px #ccc; /* for future compatibility only -- pretty > sure no browsers implement this yet */ > } > > the box-shadow syntax is vertical offset, horizontal offset, spread, color. > So > that creates a drop shadow that is 3px down, 5px right, fades over 2px, and is > gray. You can add more shadows in other colors, and other placements if you > want, but adding another string like that in the list, separating each shadow > with a comma. > > > The other option for do this is adding the shadow to your corner images, and > then adding more images to finish off the rest of the shadow. If you go that > route, it has support in all the browsers since you're using images, but it > means that you should probably use the "Box by tedd" technique: > http://sperling.com/examples/box/ > > ---Tim
Hi ! You can use a htc file to enable curved corners in Internet Explorer. http://code.google.com/p/curved-corner/ -- Donald ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
