CODEWITHSUNDEEP
css
swan
swan

Reputation: 2599

Separated oval shadow below a box with css3

How would you achieve an 10px high oval blurry shadow below a 200px box?

.box {
  width:200px;
  height:200px;
  background: #c00;
  position:relative;
}
.box:before {
  content:'';
  position: absolute;
  bottom: -20px;
  left:20px;
  width: 210px;
  height: 10px;
  background: none; /*This cuts off some portion of the box shadow*/
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
  -webkit-box-shadow: 0 15px 10px #000000;   
  -moz-box-shadow: 0 15px 10px #000000); 
  -0-box-shadow: 0 15px 10px #000000);   
  box-shadow: 0 15px 10px #000000;  
}

http://jsbin.com/uqugob The above code is almost perfect, except that I want a more thin oval blurry shadow, and remove the disturbing white background of :before.

Thanks, finally I got it as expected, almost, except that the left and right should be more blurry: http://jsbin.com/uqugob/4

Thanks

Upvotes: 1

Views: 2169

Answers (4)

Sana khalid
Sana khalid

Reputation: 1

try using:

margin:0 auto;

to make a shadow in the center and want to reduce the shadow from both left and right sides. Tried assigning it width less than the width of the div/box.

enter image description here

Upvotes: 0

user2687553
user2687553

Reputation:

I try to change the code for showing shadow after 'hover' event , doesn't work

Upvotes: 0

punkrockbuddyholly
punkrockbuddyholly

Reputation: 9794

I always like a challenge. Here's what I came up with: http://jsbin.com/uqugob/3/edit

Like @Joseph, I got rid of the vendor prefixes.

.box:before {
  content:'';
  position: absolute;
  bottom: -10px;
  left:20px;
  width: 210px;
  height: 8px;
  background: transparent; /*Without a color, the box shadows fails*/
  border-radius: 100px / 5px; 
  box-shadow: 0 25px 25px #000000;  
}

Upvotes: 1

Joseph
Joseph

Reputation: 119867

removed the styles with vendor-prefixes (they were annoying, you can add them back using what i provided) but here's the shadow's code:

.box:before {
  content:'';
  position: absolute;
  bottom: -50px;
  left:20px;
  width: 210px;
  height: 30px;
  background: #333;
  border-radius: 200px / 30px;   
  box-shadow: 0 0 10px 10px #333;   
}

Upvotes: 3

Related Questions