Avatar de biais

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Avatar de biais

Message par Sevnol17 le Ven 13 Avr 2012 - 22:53

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 Wink Merci d'avance en tout cas !


Dernière édition par Sevnol17 le Dim 15 Avr 2012 - 22:02, édité 1 fois

Sevnol17
Nouveau membre

Messages : 6
Inscrit(e) le : 13/04/2012

http://www.rpg-criminal-minds.com/
Sevnol17 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar de biais

Message par Final-Blonde le Sam 14 Avr 2012 - 21:51

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.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar de biais

Message par Sevnol17 le Dim 15 Avr 2012 - 1:51

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;
}

Sevnol17
Nouveau membre

Messages : 6
Inscrit(e) le : 13/04/2012

http://www.rpg-criminal-minds.com/
Sevnol17 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar de biais

Message par Final-Blonde le Dim 15 Avr 2012 - 11:42

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:
/* avatar sans le hover */
.poster-profile a img {
border: 5px solid #000;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
/* on ne modifie que ce qui doit changer par le hover */
.poster-profile a 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);
}

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar de biais

Message par Sevnol17 le Dim 15 Avr 2012 - 22:02

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 Wink

Sevnol17
Nouveau membre

Messages : 6
Inscrit(e) le : 13/04/2012

http://www.rpg-criminal-minds.com/
Sevnol17 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum