Tobiq Tobiq - 3 months ago 32
CSS Question

Box shadow un-wanted curving

I want to add a box shadow to my Nav-bar/header at the top of my page.

When I do like this:

.shadow { box-shadow: 0px 0px 5px #333 }

It works fine; however, because of the curvature you can see it curving at the bottom corners - I need it to be a straight down shadow.

Now because my header wraps the top of the page - the width is 100% - I could extend the side off-screen:

.shadow {
box-shadow: 0px 0px 5px #333;
left: -10px;
right: -10px;
padding: 0px 10px /* compensates for the spaces created either side */

This way the curves are hidden off screen; however this seem's like a filthy, dirty solution - is this the only way to achieve the effect I'm going for?

I've thought of adding an after with a background gradient to simulate the shadow - like so:

.shadow:after {
content: "";
position: absolute;
left: 0px;
right: 0px;
top: 100%;
height: 10px;
background: gradientStuffICantRemember
-o-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
-ie-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
-ff-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
-webkit-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated

However this is unbarabely filthy and disguisting.

Should I just extend out the header?


box-shadow has another parameter called spread that defines the size of the shadow..... it could help:

box-shadow: h-dist v-dist blur spread colour;