Des effets à transitions au passage de la souris

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

Résolu Des effets à transitions au passage de la souris

Message par lly* le Dim 7 Oct 2012 - 12:51

    Bonjour!

    J'aimerais savoir comment on obtient un effet comme ceux des catégories de ce forum: http://horse-trash.chocoforum.com/
    En gros, quand on passe la souris sur le nom des parties du forum, la couleur change progressivement. J'aimerais savoir comment faire.

    Merci à ceux qui voudront m'aider: Smile


Dernière édition par lly* le Mar 9 Oct 2012 - 20:08, édité 1 fois

lly*
Nouveau membre

Messages : 28
Inscrit(e) le : 02/05/2012

http://trinityhighschool.forumsactifs.com/
lly* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des effets à transitions au passage de la souris

Message par Freyja des Terres de Wyrd le Lun 8 Oct 2012 - 23:21

Bonsoir =)

Cela est réalisable avec le CSS cependant vous n'avez pas précisé quels éléments seraient concernés par cette transition ?

Voilà en tous cas le code pour que la couleur des titres de catégories change progressivement en rouge =)
Code:
.forumlink {
  -webkit-transition: color 1.5s ease-in;
    -moz-transition: color 1.5s ease-in;
    -o-transition: color 1.5s ease-in;
    transition: color 1.5s ease-in;
}

a.forumlink:hover {
  color: #FF0000;
}

Pour changer la couleur, il faut remplacer le "#FF0000"
Pour changer la vitesse de transition, il faut modifier le "1.5s"

Voilààà =)
J'espère vous avoir aidée =)

Freyja des Terres de Wyrd
****

Féminin
Messages : 217
Inscrit(e) le : 23/04/2012

http://terres-de-wyrd.forumsgratuits.com
Freyja des Terres de Wyrd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des effets à transitions au passage de la souris

Message par lly* le Mar 9 Oct 2012 - 17:53

Bonjour!

Oh oui je m'excuse de ne pas avoir préciser mais merci c'est ce que je voulais!
Sinon, vous savez comment faire pour qu'il y ai une transition dans le déplacement du texte? Par exemple qu'il se déplace lentement de la gauche vers la droite. Il suffit de changer quoi?

lly*
Nouveau membre

Messages : 28
Inscrit(e) le : 02/05/2012

http://trinityhighschool.forumsactifs.com/
lly* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des effets à transitions au passage de la souris

Message par Manumanu le Mar 9 Oct 2012 - 20:03

Bonjour,

Il te suffit de modifier le code comme suit :

Code:
.forumlink {
  -webkit-transition: all 1.5s ease-in;
    -moz-transition: all 1.5s ease-in;
    -o-transition: all 1.5s ease-in;
    transition: all 1.5s ease-in;
}

a.forumlink:hover {
  color: #FF0000;
  margin-left: 20px;
}

MAIS je te le déconseille fortement. C'est certes "joli" (et encore, tout est relatif), mais c'est pénible à l'utilisation (imagine tes boutons de windows qui gigoteraient chaque fois que tu veux les cliquer), et tous les navigateurs ne prennent pas encore en charge la transition progressive ; pour ceux-ci, cela devient parfois très dur d'accéder à une catégorie, parce qu'elle fiche le camp de sous le curseur lorsqu'il survole le lien, mais le texte étant trop petit, celui-ci sort de la zone du curseur, reviens donc en position initiale où il se retrouve survolé, et se met donc à clignoter sans pouvoir être cliquable.

D'une manière générale, pour des questions d'accessibilités (pense aussi que tu peux avoir des membres ayant des difficultés motrices et/ou visuelles), il est déconseillé de modifier la taille ou la position d'un élément lors de son survol (donc passer un lien en gras au survol, ou bien en italique, ou même en majuscules) ; le changement de couleur est ce qu'il y a de plus approprié.

Voilà voilà. À toi de voir.

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des effets à transitions au passage de la souris

Message par lly* le Mar 9 Oct 2012 - 20:08

Bonjour!

Et bien merci pour le code mais aussi pour la remarque! Je verrai bien ce qui va et ne va pas mais je prendrai ceci en compte. Smile
Encore merci!

lly*
Nouveau membre

Messages : 28
Inscrit(e) le : 02/05/2012

http://trinityhighschool.forumsactifs.com/
lly* 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