Thankfully, my work has agreed to only use css rounded corners in order to create the rounded corners for our website. Here is the jist of the rounded corners at the time of writing this post:
The CSS
.rounded .inner {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.box.shadowed .inner {
box-shadow:0px 3px 0px rgba(0, 0, 0, 0.20);
-moz-box-shadow:0px 3px 0px rgba(0, 0, 0, 0.20);
-webkit-box-shadow:0px 3px 0px rgba(0, 0, 0, 0.20);
}
Since I use rounded corners in css3 for boxes, it’s best to use box-shadow for the shadows…
Here is how the rules go:
box-shadow:[horizontal offset] [vertical offset] [size] [color];
as you can see in the first code snippet, I am using rgb instead of hex.
Fortunately box shadow allows for transparency of the shadow.. but only when using rgba values.
R. (red) G. (green) B. (blue) A. (alpha)
therefore [color] becomes rgba([red], [green], [blue], [alpha])
Therefore: rgba(0, 0, 0, 0.20) is black with 80% opacity.