Discussion :

[mapmip]

salut, avec drop sahdow il est possible de projeter une ombre à partir
d'un objet.
Comment faire pour montrer seulement l'ombre et cacher l'objet ?
Merci d'avance

[Pytet]

Bonjour,

Un début d'idée en utilisant overflow: hidden; sur le parent pour afficher uniquement l'ombre créée avec drop-shadow :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="container-only-shadow">
  <div id="only-shadow"></div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#container-only-shadow {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 206px;
}
 
#only-shadow {
  position: absolute;
  left: -200px;
  width: 200px;
  height: 206px;
  background-image: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg');
  background-size: cover;
  background-repeat: no-repeat;
  filter: drop-shadow(200px 0 0 blue);
}