CODEWITHSUNDEEP
htmlcss
user3112115
user3112115

Reputation: 715

How to make a shadow in the middle css

enter image description here

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?

Upvotes: 7

Views: 18503

Answers (3)

Ani
Ani

Reputation: 4523

Here's how you can do it:

Two Ways you can do this (Which ever suits you)

First one: Using border radius

URL: http://jsfiddle.net/qTYps/2/ - Haven't tested on IE8

You can change the shadow (darkness/lightness) or color by changing rgba value

.box {
  width:90%;
  padding:20px;
  background:#fff;
  margin:20px auto 60px;
  border-radius:2px;
}

.css3-shadow{
   position:relative;
   -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3); // You can remove this if you only want bottom shadow
   box-shadow:0 1px 4px rgba(0, 0, 0, 0.3); // You can remove this if you only want bottom shadow
}

.css3-shadow:after{
  content:"";
  position:absolute;
  z-index:-1;
  -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
  box-shadow:0 0 20px rgba(0,0,0,0.8);
  bottom:0px;
  left:10%;
  right:10%;
  width:80%;
  height:50%;
  -moz-border-radius:100%;
  border-radius:100%;
}

Second Method - using radial-gradient - You can change the percentage and lightness-darkness of color by changing values of percentage and rgb.

URL: http://jsfiddle.net/qTYps/1/ - Haven't tested on IE8

.box {
  width:90%;
  padding:20px;
  background:#fff;
  margin:20px auto 60px;
  border-radius:2px;
}

.css3-shadow{
  position:relative;
  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
}

.css3-shadow:after{
  content:"";
  position:absolute;
  z-index:-1;
  top:100%;
  bottom:0;
  width:120%;
  height:50px;
  left:-10%;
  right:-10%;
  background:-webkit-radial-gradient(50% -3%, ellipse cover, rgba(00, 00, 00, 0.5), rgba(97, 97, 97, 0.0) 30%);
  background:radial-gradient(ellipse at 50% -3%, rgba(00, 00, 00, 0.5), rgba(97, 97, 97, 0.0) 30%);
}

You can change shadow percentage, pixels and rgba values according to your needs. This should do it.

Upvotes: 7

Danield
Danield

Reputation: 125433

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;
}

Upvotes: 9

keaukraine
keaukraine

Reputation: 5364

CSS3 box-shadow property can have inset value. You can achieve similar look with multiple inset shadows but picking these values can be very time-consuming.

More examples here: http://css-tricks.com/snippets/css/css-box-shadow/

Info on multiple CSS shadows: http://www.techrepublic.com/blog/web-designer/css3-layering-multiple-shadows-creates-lightweight-pages/

Upvotes: 0

Related Questions