Menu
I am attempting to create an inset box-shadow on an element that only has the shadow on the left and right. I cannot get it to work.
Here is the box-shadow I tried:
box-shadow: inset 10px 0px 25px 0px rgba(0,0,0,0.45);
I will add another one for the right side. The problem is this setting also shows the shadow slightly on the top and bottom and I cannot get it to not show and still show a shadow on the left side. Is this possible?
jsFiddle
254
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.
To set a box-shadow on one side of the element, use the box-shadow property. This property has four length parameters and a color. box-shadow: h-offset v-offset blur spread color; h-offset sets the shadow horizontally.
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.
Use a width calc() to position two elements next to each other. Then add the box-shadow to both elements, followed by the clip-path on only one of them. Set the z-index of the clip-path'd element to be higher than the non-clip-path'd element. Here's an example.
Use a negative value on spread-radius (4th value) to shrink the shadow. This can hide the unwanted top and bottom shadow.
box-shadow: inset 25px 0px 25px -25px rgba(0,0,0,0.45), inset -25px 0px 25px -25px rgba(0,0,0,0.45);
See DEMO.
154
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
