Box-shadow

[lukeurtnowski]

Im trying to figure out how to make my box-shadow property of my jumbotron class from what it is now,
http://www.teamluke.net/vrbo/ (on all 4 sides)
so that it will be only visible on the top/bottom of that element

[DaveMaxwell]

Box shadows are not borders, so the top-right-bottom-left clock positioning doesn’t work.

You’re dealing with horizontal and vertical spacing, and the positives go to the top and left, so you’ll need to play with negative numbers. The other two numbers deal with blur and space radiuses.

.jumbotron {
    background-image: url(../images/jumbotron.jpg);
    height: 391px;
    margin-bottom: -150px;
    -moz-box-shadow: inset -5px -5px #888;
    -webkit-box-shadow: inset -5px -5px #888;
    box-shadow: inset -5px -5px #888;
}

Here’s a nice tool to help you play with the box shadows to find exactly the look you’re going for…

http://www.cssmatic.com/box-shadow