Avatar de biais

[Sevnol17]

Bonsoir tout le monde !
Généralement je trouve toujours les codes qu'il me faut en recherchant bien dans les sujets mais cette fois-ci je n'ai pas trouvé ce que je cherchais. Je recherche donc un code (que ce soit CSS, ou templates) qui, dès le passage de la souris sur l'avatar, le ferait légèrement pivoter. Je l'ai vu sur un forum il y a quelques jours de cela mais malheureusement, je n'ai plus l'adresse. Je vais essayer de le retrouver si jamais vous voulez un exemple. Je ne sais pas si je dois donner mon CSS où le template viewtopic_body. Bref si c'est nécessaire, je le mettrai Merci d'avance en tout cas !

[kheino]

Bonsoir,

C'est du CSS3 qui utilise les propriétés "transforme : rotate" et "transition".

Mais avant, il serait utile de savoir si tu as déjà modifié les profils des messages ?
Si oui, peux-tu fournir le template et (SEULEMENT) la partie du CSS concernant cet endroit ?

Si c'est non, alors voici l'intitulé par défaut et le code :

.poster-profile img:hover {
-o-transition: 0.4s ease;
-webkit-transition: 0.6s ease;
-moz-transition: 0.6s ease;
-htm-transition: 0.6s ease;
-ms-transition: 0.6s ease;
transition: 0.6s ease;
-o-transform: rotate(43deg);
-moz-transform: rotate(43deg);
-webkit-transform: rotate(43deg);
-htm-transform: rotate(43deg);
-ms-transform: rotate(43deg);
transform: rotate(43deg);
}

Bien sûr tu adaptes les valeurs du temps de la transition, et le degré voulu à ton goût, dès le moment où les valeurs sont les mêmes pour les différentes propriétés de bavigateurs.

[Sevnol17]

Merci pour votre réponse, pour ce qui est du template, je pense que c'est cette partie-ci :

Code:

   <!-- BEGIN displayed -->
   <tr class="post">
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_AVATAR}
 
        <center><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong><font size=4px>❝ {postrow.displayed.POSTER_NAME} ❞</font></strong></span></br>
 
              {postrow.displayed.POSTER_RANK}
 
            {postrow.displayed.RANK_IMAGE}</br></br></center>

Et dans le CSS, j'avais rajouté un cadre autour de l'avatar ce qui donne ceci :

Code:

.postdetails.poster-profile a img {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border: 5px solid #000000;
}

[kheino]

Le code donné plus haut devrait être bon, sauf que je n'ai pas mis l'indication du lien a, ce qui est plus correct, en effet.

En revanche, pour l'avatar (l'image de l'identifiant donc) on ne met que l'identifiant poster-profile.

Voici le code complet et corrigé pour ce qui est du "radius" :
Si les 4 coins reçoivent la même valeur d'arrondi, on ne le spécifie que de manière générale, sans le détailler (comme pour les bords).
Aussi, il faut ajouter les autres propriétés de navigateurs afin que les autres navigateurs puissent aussi lire les coins arrondis et pas uniquement Mozilla.

Voici le code complet :

Spoiler:

[Sevnol17]

Je viens d'essayer le code et tout fonctionne parfaitement que ce soit sur Chrome ou Internet Explorer. Pour Mozilla, je demanderai à une autre admin qui l'a installé. Un grand merci en tout cas pour votre aide précieuse. Bonne soirée