Menu
I tried to find solution (tricks) how to use box-shadow on left, right and bottom. I can only manage to find left, right and bottom at CSS3 Box Shadow on Top, Left, and Right Only.
I tried to change the value base on that, but unfortunately, it didn't work out. So if anyone has the solution already, please kindly provide it. Thank you.
With Regards,
699
Probably, the best way is using the CSS box-shadow property with the “inset” value. Also, use the :before and :after pseudo-elements, which are absolutely positioned on the right and left sides of the element.
That syntax is: box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]; The horizontal offset (required) of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
To display the shadow at the bottom of the image, the “box-shadow” property is used. For this purpose, offset-x is set as “0”, offset-y is any positive value, and the color you want to display is also set.
The simple answer is that you can't. box-shadow applies to the whole element only. You could use a different approach and use ::before in CSS to insert an 1-pixel high element into header nav and set the box-shadow on that instead.
Sorry everyone,
I just found out the answer by using the following code.
-moz-box-shadow: 0px 3px 8px rgb(100,100,100);
-webkit-box-shadow: 0px 3px 8px rgb(100,100,100);
box-shadow: 0px 3px 8px rgb(100,100,100);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With