Menu
I'm using shadow-box but it makes all the container wrapped with shadow.
How can I make a shadow only in the middle like in the picture above?
673
The presence of the inset keyword changes the shadow to one inside the frame (as if the content was debossed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content. <offset-x> <offset-y>
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.
From CSS drop-shadows without images by Nicolas Gallagher
FIDDLE
<div class="drop-shadow curved curved-hz-2">
<p>Horizontal curves</p>
</div>
.drop-shadow {
position: relative;
float: left;
width: 40%;
padding: 1em;
margin: 2em 10px 4em;
background: #FFF;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before, .drop-shadow:after {
content: "";
position: absolute;
z-index: -2;
}
.curved-hz-2:before {
top: 0;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
.curved:before {
top: 10px;
bottom: 10px;
left: 0;
right: 50%;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.6);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
-moz-border-radius: 10px / 100px;
border-radius: 10px / 100px;
}
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
