CSS3 box shadows

[Thadley]

Hey everyone, I was having little confusion with the CSS box shadow property. I want to have inner shadow on a box but only on the top and bottom sides, not the left and the right.

This is what i have right now.

box-shadow: inset 5px 5px 5px #ccc;

Problem that I’m having is that it always does it on top or border with left or right, never just top and bottom.

If anyone knows, think you could help! Thanks!

[whiteInkDesign]

if i remember how it works correctly the first number controls left-to-right shadow. The second number controls top&bottom shadow. The third controls the feathering of the shadow. Therefore you can’t have both top and bottom shadows on the same element.
It sounds like you want to use a linear gradient instead.
http://css3please.com/

[chrisburton]

I just created this in photoshop, are you referring to one of these types of box shadows?
http://i54.tinypic.com/2m6s4r6.png

@whiteinkdesign, you can have multiple shadows in the same element : )

---

Follow Me @itschrisburton

[whiteInkDesign]

@ChristopherBurton
ok, well then how do you write the CSS for multiple shadows on the same element?

[chrisburton]

@whiteinkdesign Easier than it seems. The shadows below won’t look pretty if you apply it to any element, fyi. Just an example.

#div {



box-shadow:

1px 1px 1px #888,

inset 1px 1px 1px #222,

2px 3px 2px #111;



}

[whiteInkDesign]

ah, alright, that makes sense, multiple values on the same property.

[chrisburton]

@whiteinkdesign incase you didn’t know, the same thing applies for text-shadow. You can use multiples as well.

[Thadley]

@christopherburton no not really, basically you have your box shadow on all sides on the inside, although I only want top and bottom because the left and right will make it look dumb.

Unless, is there a way i can push the left and right sides of the box off the screen at any resolution so that the shadow is there although you can’t see it?

[whiteInkDesign]

box-shadow: inset 0 5px 5px #ccc, inset 0 -5px 5px #ccc;
should work pretty well.

[chrisburton]

@Thadley isn’t that exactly what the first button shows in the image I created?

[chrisburton]

It would be more helpful in the future if you displayed the button or whatever you’re using this for so I can test off of it.

* Change the last box-shadow to the background color of the button. *

	box-shadow:

inset 0 1px 1px rgba(0, 0, 0, .5),

inset 0 -1px 1px rgba(0, 0, 0, .5),

inset -1px 0 -1px #color-of-background-here;

[Author]

Posts