Effet pour les titres

3 participants

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

Résolu Effet pour les titres

Message par Hayari Mer 10 Avr 2013 - 18:27

Bonjour!

Alors voilà, j'avais une idée pour mes titres de catégories et j'avais tester un tutoriel qui vient d'ici mais je ne le retrouve plus X-X (désolé ><) pour les faire décaler doucement vers la droite au passage de la souris.
Spoiler:
A la place j'avais retrouver un forum qui a exactement l'effet recherché, peut être pouvez vous m'aider à partir de ça.

Merci d'avance!
Cordialement, Hayari



Dernière édition par Hayari le Jeu 11 Avr 2013 - 17:11, édité 2 fois
Hayari

Hayari
****

Féminin
Messages : 230
Inscrit(e) le : 30/04/2012

http://t-i-s.forumactif.org/
Hayari a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet pour les titres

Message par Naruhiko Mer 10 Avr 2013 - 19:15

Bonsoir,

Je pense qu'il vous suffit de rajouter ceci dans votre Panneau d'Administration -> Affichage -> Couleurs -> Feuille de style CSS :
Code:
a.forumlink:hover{
    transition: 1s
    -htm-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    padding-left: 50px;
}
Bien sûr chacune des valeurs est modifiable, par contre si vous modifiez pour "-htm-transition", il faudra le faire également pour tous les autres. Si vous avez déjà un code avec "a.forumlink:hover", il vous suffit de rajouter les propriétés.

Cordialement.
Naruhiko

Naruhiko
****

Masculin
Messages : 201
Inscrit(e) le : 21/06/2012

http://naruto-the-destiny.forumactif.com
Naruhiko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet pour les titres

Message par Hayari Mer 10 Avr 2013 - 19:48

Bonsoir, merci pour votre réponse.

Alors j'ai remarqué qu'il manquait un point virgule dans le code que vous m'avez fourni. L'ayant rajouter, j'ai enregistrer et j'ai regarder le résultat... ça ne marche pas =/
Hayari

Hayari
****

Féminin
Messages : 230
Inscrit(e) le : 30/04/2012

http://t-i-s.forumactif.org/
Hayari a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet pour les titres

Message par Matriochka Mer 10 Avr 2013 - 20:03

Bonsoir,

Le code donné par Naruhiko est à moitié correct, à vrai dire…

Je t’invite à lire ce tutoriel :
https://forum.forumactif.com/t345726-ajouter-un-effet-de-transition-sur-les-liens Smile
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet pour les titres

Message par Hayari Mer 10 Avr 2013 - 20:52

Bonsoir!
Alors j'ai lu le tutoriel mais je ne le comprend pas bien pour passer de ça a l'effet désirer XD Je ne sais pas quoi mettre à la place de "all".


Et dans la partie "transition et survol", je bloque un peu XD J'ai mis
a.forumlink:hover {} Mais je ne sais pas quoi mettre à l’intérieur des crochets
><
Hayari

Hayari
****

Féminin
Messages : 230
Inscrit(e) le : 30/04/2012

http://t-i-s.forumactif.org/
Hayari a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet pour les titres

Message par Naruhiko Jeu 11 Avr 2013 - 16:09

Re,

Toutes mes excuses, j'ai été trop vite du coup j'ai oublié tout un morceau du code, c'est pas étonnant que ça ne fonctionnait pas ! Je reprends, donc il faut que vous alliez dans votre feuille de style et que vous rajoutiez ce code (ou que vous rajoutiez ces valeurs dans un code déjà existant) :
Code:
a.forumlink{
    transition: all 1s;
    -htm-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
}

a.forumlink:hover{
    transition: all 1s;
    -htm-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    padding-left: 50px;
}
- Comme je l'ai dit précédemment, si vous modifiez par exemple "transition: all 1s;" il faudra faire les mêmes modifications à -htm-, -moz-, -o- etc... J'ai regroupé la fonction transition et transform grâce au tutoriel qu'a donné Matriochka (merci d'ailleurs, je ne savais pas qu'on pouvait faire cela).

- Lorsque vous passez la souris sur le lien, le padding-left c'est la distance que le "lien effectue" vers la droite.

- Au niveau du "all", par déduction je crois que ça effectue tous les effets, par exemple si vous le remplacez par "color", ça changera seulement la couleur lorsque vous passerez la souris.

Cordialement.
Naruhiko

Naruhiko
****

Masculin
Messages : 201
Inscrit(e) le : 21/06/2012

http://naruto-the-destiny.forumactif.com
Naruhiko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet pour les titres

Message par Hayari Jeu 11 Avr 2013 - 17:10

D'accooooooooord, merci c'est assimilé ^^ Et en plus ça marche, merci beaucoup =)

sujet résolu
Hayari

Hayari
****

Féminin
Messages : 230
Inscrit(e) le : 30/04/2012

http://t-i-s.forumactif.org/
Hayari 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