CODEWITHSUNDEEP
css
Mark
Mark

Reputation: 33571

css3 box shadows in one direction only?

I have an element that has inset box shadows, but I want the shadow on only the top.

Is there no way to set only the top shadow? Do I have to resort to creating additional elements to overlay the side shadows?

Upvotes: 55

Views: 72290

Answers (7)

Webpixstudio
Webpixstudio

Reputation: 155

Here is my example please try once

-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;

Upvotes: 1

Marcos Eusebi
Marcos Eusebi

Reputation: 637

Maybe try using box-shadow:

box-shadow: h-shadow v-shadow blur spread color inset;

with overflow-x:

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

use overflow-x: hidden; and box-shadow: 0px 10px 16px -10px #000;

Upvotes: 0

Shabnam K
Shabnam K

Reputation: 1582

Example:

  box-shadow: 0 2px 0px 0px red inset;

The First parameter and second parameters specifies the offset of shadow to x-direction and y-direction respectively. Third parameter specifies the blur distance. Finally, the fourth parameter specifies the spread distance.

Specifying only the second parameter with the offset you want gives the top shadow without side shadows.

Demo can be found here: http://jsfiddle.net/rEdBy/

A very nice tutorial on CSS3 Box shadows - http://www.css3.info/preview/box-shadow/

Upvotes: 2

user1187135
user1187135

Reputation:

Here's a little hack that I did.

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

  1. Create a <div class="one_side_shadow"></div> right below the element that I want to create the one-side box shadow (in this case I want a one-sided inset shadow for id="element" coming from the bottom)

  2. Then I created a regular box shadow using a negative vertical offset to push the shadow upwards to one-side.

    box-shadow: 0 -8px 20px 2px #DEDEE3;

Upvotes: 0

zzzzBov
zzzzBov

Reputation: 179046

This is technically the same answer as @ChrisJ, with a few more details on how to make box-shadow do your bidding:

for reference the * items are optional:

box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>;

The <spread-radius> needs to be negative <blur-radius> (so that none of the other blurred sides show up), and then you need to bump the <offset-y> down by the same amount:

box-shadow: inset 0 20px 20px -20px #000000;

It will give you a single gradient band across the top of the element.

Upvotes: 131

methodofaction
methodofaction

Reputation: 72385

A better way would be using a background gradient, here are both side to side.

http://jsfiddle.net/wh3L8/

Upvotes: 2

ChrisJ
ChrisJ

Reputation: 5251

box-shadow offsets the shadow by a given amount in each direction. So you need x-offset to be 0, and y-offset to be something negative.

Additionally, you have to play with the blur-radius and spread-radius so that the shadow is not visible on the left and right sides.

Example:

box-shadow: #777 0px -10px 5px -2px;

See the description on the Mozilla Developer Network.

Upvotes: 12

Related Questions