Hello... I have a box shadow setting in the CSS and the problem is it appears all around in my case it should only appear on the left and right: .bttm-wrapper{ margin: auto; height: 29px; padding-top: 5px; padding-bottom: 15px; width: 1080px; float: left; border: 0px; background-color: #FFFFFF; moz-box-shadow: 0 0 14px #404040; webkit-box-shadow: 0 0 14px #404040; box-shadow: 0 0 14px #404040; } HTML: I could make it by putting it into a parent DIV that cuts down the top and bottom shadows (while setting "overflow: hidden"), but I want to make it simpler. I know there was a way to compensate for the right side and left side shadows in order to make the resulting value zero. Ideas?
This link might help you out http://css-tricks.com/snippets/css/css-box-shadow/ I believe Chris Coyer is the coder, very well known on the internet.
The trick is a negative global offset. box-shadow: 7px 0 7x -7px #404040, -7px 0 7px -7px #404040; Code (markup): This results in the corners being blurred though -- if you want it to run flat up to the edge, you'd have to use the overflowed parent approach... though usually if you wanted it run up to the edge that's because you've got siblings doing the same, which is when ALL those siblings should be getting shadow from a parent wrapper... but I'd have to see what it is you're actually trying to do in order to say for certain... that massive fixed width being a warning sign that whatever it is you're doing on the page, it can't be a good thing.
hi, should be set correct site you want shadow.. left and right means try this code... .bttm-wrapper{ margin: auto; height: 29px; padding-top: 5px; padding-bottom: 15px; width: 1080px; float: left; border: 0px; background-color: #FFFFFF; moz-box-shadow: 0px; 14px; 0px; 14px; #404040; webkit-box-shadow: 0px; 14px; 0px; 14px; #404040; box-shadow: 0px; 14px; 0px; 14px; #404040; }
Thank you all, I solved it almost 2 months ago. I finally decided to use shadows all around, just that I made them look different from what I had planned. Sorry, I should have written a "problem solved" here, but thank you for your tips!