Re: [css-d] Drop Shadow for a div with rounded corners
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/
Re: [css-d] Drop Shadow for a div with rounded corners
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/
[css-d] Drop Shadow for a div with rounded corners
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-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/
