Discussion :

[spinoops]

Bonjour,

J'ai un problème avec des effets spéciaux sur les ombres. En effet, j'ai une "box" sur mon site ou j'aimerais un effet de type :



Seulement, ça me donne ceci :



Voici mon code HTML :

Code html :

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

1
2
3
4
5
6
<div id="wrapper">
<div id="background">
<div id="box">
</div>
</div>
</div>

Voici mon 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
41
42
43
44
45
46
47
48
49
50
#wrapper {
width : 1000px;
height : 500px;
position : relative;
z-index : 1;
}
 
#background {
background : white;
position : relative;
z-index : 2;
}
 
#box{
 
display: block;
	width : 320px;
	height : 200px;
	background : white;
	margin : 15px;
	position:relative;
	z-index : 3;
 
 
}
 
#box:before, #box:after
{
content:"";
    position:absolute; 
    z-index: -1;
    -webkit-box-shadow:0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow:0 0 10px rgba(0,0,0,0.5);
    box-shadow:0 0 10px rgba(0,0,0,0.5);
    top:0;
    bottom:0;
    left:5px;
    right:5px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
	}
#box:after {
right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}

C'est du code simplifié, juste pour montrer que j'ai plusieurs niveaux de <div> même si dans l'exemple-ci, ça semble inutile.

J'ai l'impression que le dessus de ma box dans #box vient en dessous de l'ombre mais je ne comprends pas pourquoi car elle est en z-index -1...

J'ai également fait attention à ce que chaque <div> ait sa position les unes sur les autres.

En espérant que vous puissiez m'aider.

Merci d'avance!

[spinoops]

Problème résolu. J'ai tout effacé et tout recommencé. Je pense que mon code a dû se nettoyer de petites imperfections... Peut-être les éléments que j'avais à l'intérieur de ma div #box...

En tout cas c'est tout bon

[Torgar]

Et si tu partageais ta solution ?

Le code peut en intéresser certains ici