Pseudo-element !!!

bonjour à tous !!!

je galère depuis deux jours à comprendre pourquoi je n'arrive pas à faire apparaitre le shadow avec les pseudos éléments.

j'ai remarqué quand j'enlève un background-color ( class="BGC-blc") d'un table qui me colore le fond du site , c'est nickel mais sinon avec le background-color j'ai la box mais sans les effets

code du table :

<table width="1230" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td height="1" align="left" class="BGC-blc">

code du background-color

.BGC-blc {background-color: #ffffff}

code de la box avec effet de curve shadow

<div class="box effect2">

55555

</div>

le CSS

.box {
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	width:50%;
	height:200px;
	background:#FFF;
	margin:40px auto;
	border: 1px solid #BBB;
}

.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 25px 10px #777;
  -moz-box-shadow: 0 25px 10px #777;
  box-shadow: 0 25px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

la je commence à plus avoir de cheveux lol !!!

y a un truc qui dois échappé

merci de votre aide
Modifié par win64 (09 Sep 2014 - 18:43)

bon !

je viens de tester un truc !

j'ai mis la couleur de fond en opacity 0.5 et la je vois que mon fond ce met entre la box et le shadow

et c'est pour ça que je peux pas le voir !

maintenant reste à savoir Pourquoi mon fond coloré se met entre le 2 ???? et la chapeau a celui qui trouve !!!

bon !! j'ai trouver la solution grace à "opacity" qui m'a mis sur la voix

voila la solution pour les internautes:

c'est de mettre une div coloré comme mon fond en z-index 1.

<div style="z-index: 1; position: relative; text-align:center; top:80px; background:#FFFFFF; margin:40px auto;"><div class="box effect2">

texte exemple

</div>

plus qu'a mettre en feuille de style