I have been trying to search and find a way to make a shadow and only have it on the right side of the box. How would you go about doing this with box-shadow or is it even possible?
The trick is to use a negative spread value: http://jsfiddle.net/joshnh/QYBtT/
That worked great! Could you maybe point me in the right direction on why that worked? I thought it could be done but was not sure how to visualize the shadows.
Here is a breakdown: http://jsfiddle.net/joshnh/gs52d/
Feel free to play around with the values so that you understand what they do.
Awesome! Thanks. I do have another question with the box shadow. How can I make it so it only shows the top and bottom shadows? I have this which kind of works but doesn’t still has some ‘bleed’ on the left and right:
box-shadow: 0px 5px 5px 0 #333, 0px -5px 5px 0 #333;
I actually just lowered the amount of ‘bleed’ on the right by using:
box-shadow: -3px 5px 5px -3px #333, -3px -5px 5px -3px #333;
But still has some on the left.
Make sure to increase the offset to account for the negative spread: http://jsfiddle.net/joshnh/AtM5U/
Oh ok good, I am on the right path then, just need to play with it more.
You must be logged in to reply to this topic.