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
______________________________________________________________________
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/
