Menu
I have been having trouble setting a box shadow on the left side of an element only.
I tried this:
.box { box-shadow: -10px 0px 3px 0px #aaa; }<div class="box">Example element</div>However, the box shadow looks more like a grey line and lacks the regular shadow-effect that I am used to when using box-shadow. Also, the above example includes a small top box-shadow that I am trying to get rid of.
585
h-offset: It is required and used to set the position of the shadow horizontally. The positive value is used to set the shadow on right side of the box and a negative value is used to set the shadow on the left side of the box. v-offset: It is required and used to set the position of shadow vertically.
To apply a shadow effect only on one side of an element set the blur value to a positive number and set the spread value to the same size but with a negative sign. Depending on which side you want the shadow on, set the offset value as follows: Top shadow: offset-x: 0 and offset-y: -5px.
Simply apply the following CSS to the element in question: box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */ clip-path: inset(Apx Bpx Cpx Dpx);
1) Set your shadow's horizontal alignment to the left (negative values). box-shadow: -30px 0px 10px 10px #888888; Although this way you won't have the same shadow size in the top and bottom. 2) Use a div inside a div and apply shadow to each one.
You probably need more blur and a little less spread.
box-shadow: -10px 0px 10px 1px #aaaaaa; Try messing around with the box shadow generator here http://css3generator.com/ until you get your desired effect.
155
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
