Menu
How do you apply a drop shadow to a specific border edge?
For example, I have the following code:
header nav { border-top: 1px solid #202020; margin-top: 25px; width: 158px; padding-top:25px; } I want a drop shadow (1px 1px 1px #cdcdcd) applied only to border-top.
What's the best way to achieve this?
EDIT
This is essentially what I'm looking for
div { border-top: 1px solid #202020; margin-top: 25px; margin-left:25px; width: 158px; padding-top:25px; -webkit-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75); box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75); } However, the shadow seems to be impacted by the padding. Is there anyway to attach the shadow to the border alone without adjusting the padding?
481
essentially the shadow is the box shape just offset behind the actual box. in order to hide portions of the shadow, you need to create additional divs and set their z-index above the shadowed box so that the shadow is not visible.
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.
Use the box-shadow Property to Set the Bottom Box Shadow in CSS. We can use the box-shadow property to set the shadow only at the bottom of the box. The box-shadow property sets the shadow of the selected element.
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.
Something like this?
div { border: 1px solid #202020; margin-top: 25px; margin-left: 25px; width: 158px; height: 158px; padding-top: 25px; -webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75); box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75); }<div></div>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
