csscss-shapesshadowbox

How to make a picture shadow with CSS3

I want to implement a picture shadow as below

picture shadow

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.

Solution

  • 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>