How to make a picture shadow with CSS3

Question

I want to implement a picture shadow as below

I tried to use the following code, but that can't work as I want

Code snippet:

.oval {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 30px;
  height: 5px;
  border: none;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  color: rgba(0, 0, 0, 1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #1abc9c;
  -webkit-box-shadow: 0 100px 4px -2px rgba(15, 13, 13, 0.53);
  box-shadow: 0 100px 4px -2px rgba(15, 13, 13, 0.53);
  -webkit-transform: scaleX(5);
  transform: scaleX(5);
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
}

<div class="oval"></div>

I want to put the HTML code below the picture if the CSS code works well.

can you post a html code? – Sebastian Brosch Dec 15 '15 at 10:09 — Sebastian Brosch, Dec 15 '15 at 10:09

score 3 · Answer 1 · answered Dec 15 '15 at 10:15

3

You could achieve this quite easily if you're able to wrap the <img /> element in a container tag such as a <div>. By using the :after pseudo-selector on the parent div, you can achieve a similar approach using box-shadow.

For example, assuming you have the following markup:

You may add the following CSS definitions:

.image-round {
  border: 4px solid red;
  border-radius: 50%;
}

.image-shadow {
  display: inline-block;
  position: relative;
}
  .image-shadow:after {
    display: block;
    content: '';
    position: absolute;
    bottom: -30px;
    height: 10px;
    right: 5px;
    left: 5px;
    border-radius: 50%;
    background: #ccc;
    box-shadow: 0 0 10px 10px #ccc;
  }

Of course, you can modify the left and right properties of the :after pseudo-element to achieve a better look.

jsFiddle Demo

answered Dec 15 '15 at 10:15

BenM

52,573
26
113
168

Thanks, but how can I adjust the code to implement the same as shadow shape in my picture? – Jair Dec 15 '15 at 10:36
As I've said, by modifying the `left`, `right` and `box-shadow` properties. – BenM Dec 15 '15 at 10:37
I tried a lot properties(http://jsfiddle.net/kdhva29n/), but the result always has a small different with the design picture. I think I need to drop `css` way. – Jair Dec 15 '15 at 10:53

Harry · Accepted Answer · 2015-12-16T03:09:54.403

Another method to achieve this would be to make use of a pseudo-element with CSS transform. In the below snippet, the :after pseudo-element is rotated in X-axis by close to 90deg (but not by equal to 90deg) to give it an oval like appearance. Then by adding a radial-gradient background and box-shadow, we can get an appearance close to the image in the picture.

One advantage of this approach is that the shadow that is produced is responsive and so it can adapt to change in container/image sizes.

.oval{
  position: relative;
  height: 200px;
  width: 200px;
  border: 8px solid red;
  border-radius: 50%;
}
.oval img{
  border-radius: 50%;
}
.oval:after{
  position: absolute;
  content: '';
  height: 100%;
  width: calc(100% - 40px); /* to offset for the shadow */
  top: 25%;
  left: 20px; /* to offset for the shadow spread */
  border-radius: 50%;
  backface-visibility: hidden;
  transform-origin: 50% bottom;
  transform: rotateX(85deg);
  background: radial-gradient(ellipse at center, rgba(216,216,216, 0.5), rgba(248,248,248,0.1));
  box-shadow: 0px 0px 20px 20px rgba(248,248,248,0.5);
}

/* Just for demo */

.oval#oval2{ height: 300px; width: 300px; }
div{ float: left; }

<div class="oval">
  <img src='http://lorempixel.com/200/200/nature/1' />
</div>

<div class="oval" id="oval2">
  <img src='http://lorempixel.com/300/300/nature/1' />
</div>

How to make a picture shadow with CSS3

2 Answers2