28172 sujets

CSS et mise en forme, CSS3

[Résolu] Pseudos-classes :before et :after n'acceptent pas de transit

Bonjour,
je fais un menu pour mon site, j'utilise :before et :after pour ajouter des ombres arrondies sur les côté (je ne les fais pas en css car trop complexe), cependant, j'aimerais ajouter un petit fondu sur le hover, mais... :before et :after s'y opposent !! Je ne comprend pas pourquoi...

Voilà mon css:


.item {
	top:-2;
	padding:21 0 21 0;
	font-size:17;
	cursor:pointer;
	position:relative;
}

.item:hover {
	background:rgba(0,0,0,0.03);
}

.item:active {
	background:rgba(0,0,0,0.07);
}

.item:before, .item:after {
	content:'';
	background:url(medias/item.png);
	width:8;
	height:60;
	top:24;
	opacity:0.0;
	display:inline-block;
	position:relative;
	-webkit-transition:0.3s;
	-moz-transition:0.3s;
	-o-transition:0.3s;
	transition:0.3s;
}

.item:before {
	background-position:8 0;
	margin:0 20 0 0;
}

.item:after {
	margin:0 0 0 20;
}

.item:hover:before, .item:hover:after {
	opacity:0.6;
}


La maquette du site est ici

Merci de votre précieuse aide !
Modifié par xXjujo002Xx (06 Jun 2012 - 17:41)
Hello.

Je crois qu'il y a un souci avec ta déclaration transition. Teste avec 
-xxx-transition: opacity 0.3s
Bonjour,

je confirme, pas de support de transition sur :before et :after dans chrome et Safari (ceci est un défaut connu)

cordialement,
GC
Pour Chrome, certes. Mais sous FF (pas testé Opéra), la transition sur l'opacité se fait correctement en rajoutant la bonne déclaration.
Non sur opéra ça ne fonctionne pas (pas sur Mac en tout cas), je me suis débrouillé autrement (en mettant de vrais éléments à la place des pseudos-classes :after et :before)

ça donne ceci:

HTML:

<a class="item"><p class="item-before"></p>Portfolio<p class="item-after"></p></a>
<a class="item"><p class="item-before"></p>Ressources<p class="item-after"></p></a>
<a class="item"><p class="item-before"></p>Blog<p class="item-after"></p></a>


CSS:

.item {
	top:-23;
	padding:21 0 21 0;
	font-size:17;
	text-shadow:0 1px 0 white;
	cursor:pointer;
	position:relative;
	-webkit-transition:0.7s;
	-moz-transition:0.7s;
	-o-transition:0.7s;
	transition:0.7s;
}

.item:hover, .select {
	background:rgba(0,0,0,0.02);
	color:#008ccf;
}

.item:active {
	background:rgba(0,0,0,0.04);
	-webkit-transition:0s;
	-moz-transition:0s;
	-o-transition:0s;
	transition:0s;
}

.item-before {
	background:url(medias/item.png) 8 0;
	width:8;
	height:60;
	top:23;
	margin:0 20 0 0;
	opacity:0.0;
	display:inline-block;
	position:relative;
	-webkit-transition:0.3s;
	-moz-transition:0.3s;
	-o-transition:0.3s;
	transition:0.3s;
}

.item-after {
	background:url(medias/item.png);
	width:8;
	height:60;
	top:23;
	margin:0 0 0 20;
	opacity:0.0;
	display:inline-block;
	position:relative;
	-webkit-transition:0.3s;
	-moz-transition:0.3s;
	-o-transition:0.3s;
	transition:0.3s;
}

.item:hover .item-before, .item:hover .item-after {
	opacity:0.6;
	-webkit-transition:0.7s;
	-moz-transition:0.7s;
	-o-transition:0.7s;
	transition:0.7s;
}

.item:active .item-before, .item:active .item-after {
	opacity:0.9;
	-webkit-transition:0s;
	-moz-transition:0s;
	-o-transition:0s;
	transition:0s;
}


Merci de votre aide !
Modifié par xXjujo002Xx (07 Jun 2012 - 17:48)
Sujet clos
Aller à