CODEWITHSUNDEEP
cssbox-shadow
Tim Liberty
Tim Liberty

Reputation: 2129

Box shadow on top, bottom and left only

I want to add the box-shadow just to top, bottom and left sides only - no right side.

This is my CSS class:

.topBottomLeft{
      box-shadow: inset -1px 0px 0.5px 0.5px #000,inset 0 1px 0.5px 0.5px #000,inset 0 -1px 0.5px 0.5px #000 !important;
}

This is my jsfiddle: https://jsfiddle.net/Ly4tocny/

It is applying the box shadow however to all four sides. What am I missing?

Upvotes: 1

Views: 1480

Answers (2)

user3335607
user3335607

Reputation: 258

You are close to a solution. You just need to tweak the values a bit.

Here is a working example with your method, with some added emphasis so you can see the changes I made.

    box-shadow: inset 0 5px 0.5px 0.5px #000,
    inset 0 -5px 0.5px 0.5px #000,
    inset  5px 0.5px 0.5px #000;

https://jsfiddle.net/ercnvzj7/

I recommend this, for future shading: http://css3generator.com/

Upvotes: 3

Jeaf Gilbert
Jeaf Gilbert

Reputation: 11981

The first inset value should be 1 not -1.

.topBottomLeft {
    box-shadow: inset 1px 0px 0.5px 0.5px #000,inset 0 1px 0.5px 0.5px #000,inset 0 -1px 0.5px 0.5px #000;
}

Upvotes: 2

Related Questions