Comment faire une ombre d'image avec CSS3

Question

Je veux mettre en œuvre une ombre de l'image comme ci-dessous

J'ai essayé d'utiliser le code suivant, mais qui ne peut pas travailler comme je veux

Extrait de code:

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

Je veux mettre le code HTML sous l'image si le code CSS fonctionne bien.

Answer 1

Une autre méthode pour y parvenir serait d'utiliser un pseudo-élément CSS transformer. Dans l'extrait ci-dessous, le pseudo-élément :after est tourné dans l'axe X d'environ 90deg (mais pas égal à 90deg) pour lui donner un aspect ovale. Ensuite, en ajoutant un radial-gradient arrière-plan et box-shadow, nous pouvons obtenir une apparence proche de l'image dans l'image. Un avantage de cette approche est que l'ombre produite est réactive et peut donc s'adapter aux changements de taille des conteneurs/images.

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

Answer 2

Vous pouvez réaliser ceci assez facilement si vous êtes capable d'envelopper l'élément <img /> dans une étiquette de conteneur telle qu'un <div>. En utilisant le pseudo-sélecteur :after sur le parent div, vous pouvez obtenir une approche similaire en utilisant box-shadow.

Par exemple, supposant que vous avez le balisage suivant:

Vous pouvez ajouter les définitions CSS suivantes:

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

Bien sûr, vous pouvez modifier les propriétés left et right du Pseudo-élément pour obtenir un meilleur aspect.

jsFiddle Demo