Rotation de l'avatar au passage de la souris Bouton_activeRotation de l'avatar au passage de la souris Bouton_hoverRotation de l'avatar au passage de la souris Fb-hoverRotation de l'avatar au passage de la souris Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Rotation de l'avatar au passage de la souris EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Rotation de l'avatar au passage de la souris EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Rotation de l'avatar au passage de la souris EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Rotation de l'avatar au passage de la souris EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Rotation de l'avatar au passage de la souris EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Rotation de l'avatar au passage de la souris EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Rotation de l'avatar au passage de la souris EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Rotation de l'avatar au passage de la souris EmptySam 11 Fév 2023, 06:04 par Krager

Le deal à ne pas rater :
SSD interne Crucial BX500 2,5″ SATA – 500 Go à 29,99€
29.99 €
Voir le deal

Partagez
 

Rotation de l'avatar au passage de la souris

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Adrad
{ Membre }
{ Membre }

Féminin Messages : 15



Rotation de l'avatar au passage de la souris Empty
Bonjour =)

J'ai un petit souci avec le code que j'ai mis pour que au passage de la souris, l'avatar fasse une petite rotation vers la droit, seulement cela ne marche pas, il reste bloqué et je ne comprends pas pourquoi. ^^ Voici mon css :

Code:
.postdetails.poster-profile a img, .cadravatar {
border-top:6px solid #A39627;border-right:4px solid #D7CA57;border-bottom:6px solid #E7DF98;border-left:4px solid #CFBF34;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius:2px;
padding:0px;
-moz-box-shadow: 2px 2px 6px #ffffff;
-moz-transform: rotate(2deg);
opacity:1;
margin-bottom:-5px;
}

.cadravatar.postdetails.poster-profile a img:hover {
-moz-transform: rotate(6deg);}
MessageSujet: Rotation de l'avatar au passage de la souris   Rotation de l'avatar au passage de la souris EmptyVen 20 Avr 2012, 15:18
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Rotation de l'avatar au passage de la souris Empty
Hum, ne serait-ce pas plutôt :
Code:
.cadravatar.postdetails.poster-profile a img  {


Il faudrait que tu nous montres soit ton forum, soit le template viewtopic_body pour qu'on te dise ce qui ne va pas, mais de toute évidence le problème réside dans ta façon d'écrire les classes CSS.

Accessoirement, -moz- ça limite tous tes effets à Firefox. Que fais tu de Chrome, Opera, Internet Explorer ?
MessageSujet: Re: Rotation de l'avatar au passage de la souris   Rotation de l'avatar au passage de la souris EmptyVen 20 Avr 2012, 15:55
Revenir en haut Aller en bas
Adrad
{ Membre }
{ Membre }

Féminin Messages : 15



Rotation de l'avatar au passage de la souris Empty
Le problème, c'est que quand je le mets sous cette forum je n'ai plus aucun effet du tout

voici mon forum : http://dark-moon.forumgratuit.org/t58-m-au-choix-arrete-de-me-suivre

Ah, je ne savais pas que cela était seulement fait pour mozilla ^^"
MessageSujet: Re: Rotation de l'avatar au passage de la souris   Rotation de l'avatar au passage de la souris EmptyVen 20 Avr 2012, 16:07
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Rotation de l'avatar au passage de la souris Empty
Comme l'explique Christa', il y a tout d'abord une erreur sur le premier sélecteur.
La virgule permet de sélectionner plusieurs cibles différentes pour un même effet. Par coup de chance cela faisait que ça marchait par défaut, mais pas lors du passage de la souris.

En effet, une deuxième erreur s'est glissée dans le sélecteur en soit. Je suppose qu'il s'agit simplement de la div de classe .cadravatar que vous souhaitez faire pivoter. Du coup, le reste est superflu (ça faisait pas mal de classes... qui n'existent pas dans votre HTML, du moins pas sous cette forme).

Enfin, le préfixe -moz- cible en effet le navigateur mozilla (Firefox).
Pour couvrir les autres navigateurs, il faut également faire intervenir leurs préfixes spécifiques (-webkit- et -o- principalement). Enfin, il faut finir par la propriété générique, sans préfixe. A terme, avec l'intégration de ces standards dans l'ensemble des navigateurs, nous n'auront plus besoin de préfixer en effet ces propriétés (votre code restera donc compatible, au passage).

Voici une version du CSS qui répond à ces critères, essayez de voir ce que ça donne :
Code:
.cadravatar {
   border-top:6px solid #A39627;border-right:4px solid #D7CA57;border-bottom:6px solid #E7DF98;border-left:4px solid #CFBF34;

   -moz-border-radius:2px;
   -webkit-border-radius:2px;
   -o-border-radius:2px;
   border-radius:2px;
   
   padding:0px;
   margin-bottom:-5px;
   
   -moz-box-shadow: 2px 2px 6px #ffffff;
   -webkit-box-shadow: 2px 2px 6px #ffffff;
   -o-box-shadow: 2px 2px 6px #ffffff;
   box-shadow: 2px 2px 6px #ffffff;
   
   -moz-transform: rotate(2deg);
   -webkit-transform: rotate(2deg);
   -o-transform: rotate(2deg);
   transform: rotate(2deg);
   
   opacity:1;
}

.cadravatar:hover {
   -moz-transform: rotate(6deg);
   -webkit-transform: rotate(6deg);
   -o-transform: rotate(6deg);
   transform: rotate(6deg);
}


Je vous laisse adapter le code si vous ne souhaitez tourner que l'image, et non le cadre (si vous avez compris ce que nous venons de vous expliquer, ça devrait aller comme sur des roulettes) =)
MessageSujet: Re: Rotation de l'avatar au passage de la souris   Rotation de l'avatar au passage de la souris EmptySam 21 Avr 2012, 21:28
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Rotation de l'avatar au passage de la souris Empty
Bonjour Adrad ! (Tiens deuxième fois ^^)
Le problème est-il toujours d'actualité ?
Si c'est le cas, merci de donner des explications détaillés aux codeurs afin qu'ils puissent t'aider (:
Si nous n'avons toujours pas de réponse dans 3 jours, le problème sera considéré comme résolu.
Merci de ta compréhension Rotation de l'avatar au passage de la souris 926145
MessageSujet: Re: Rotation de l'avatar au passage de la souris   Rotation de l'avatar au passage de la souris EmptyVen 27 Avr 2012, 08:14
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Rotation de l'avatar au passage de la souris Empty
Bonjour !
N'ayant toujours pas obtenu de réponse et le délai étant dépassé, le sujet est donc considéré comme résolu !
Merci de ta compréhension Rotation de l'avatar au passage de la souris 926145
MessageSujet: Re: Rotation de l'avatar au passage de la souris   Rotation de l'avatar au passage de la souris EmptyMar 01 Mai 2012, 05:53
Revenir en haut Aller en bas
Contenu sponsorisé




Rotation de l'avatar au passage de la souris Empty
MessageSujet: Re: Rotation de l'avatar au passage de la souris   Rotation de l'avatar au passage de la souris Empty
Revenir en haut Aller en bas
 

Rotation de l'avatar au passage de la souris

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Texte au passage de la souris
» "changement" au passage de la souris
» Image qui s'agrandissent au passage de la souris.
» Forums en images au passage de la souris....
» Liens lumineux au passage de la souris

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit