Pseudo élément & :before

**Floco** · 05/02/2012, 14h54

Bonjour,

J'ai soucis en CSS3, j'ai une liste comme ceci :

Code :

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

1
2
3
4
5
6
7
8
 
<div id="testCSS">
	<ul>
		<li><img src="image.jpg" width="269" height="385"></li>
		<li><img src="image.jpg" width="269" height="385"></li>
		<li><img src="image.jpg" width="269" height="385"></li>
	</ul>
</div>

Je souhaiterais avoir une ombre "3D", c'est à dire qu'elle s'étend sur une surface, derrière l'image.
J'ai réussi à la faire grâce aux pseudo élément et à :before.

Voici le code CSS :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
#testCSS {
	height: 385px; 
	position: relative;
}
 
#testCSS ul li{
	float: left;
	height: 385px;
	margin-left: 20px;
	margin-right: 20px;
	list-style-type: none;
}
 
#testCSS ul li:before{
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 16px;
	left: 106px;
	top: 0%;
	max-width:250px;
	width: 100%;
 
	opacity: 0.3;
	-moz-opacity: 0.3;
	filter:alpha(opacity=3);
 
	background-image: linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
	background-image: -o-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
	background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
	background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
 
	-webkit-transform: rotate(8deg);
	-moz-transform: rotate(8deg);
	-o-transform: rotate(8deg);
	-ms-transform: rotate(8deg);
	transform: rotate(8deg);
}

Le seul soucis c'est que les 3 pseudo-éléments se superpose derrière l'image 1 alors qu'il devrait chacun se trouver derrière leur image (li).

Du coup j'ai le résultat escompter mais que sur la première image. J'aimerais que l'effet s'applique correctement sur les 2 autres images.

Vous trouverez un projet exemple très simple en pièce jointe afin d'améliorer votre compréhension.

Merci d'avance pour votre aide !