texte décaller au passage de la souris

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

Résolu texte décaller au passage de la souris

Message par ptimich le Mer 19 Sep 2012 - 23:16

Bonjour à tous j'ai vu une chose sur un thème hitskin qui me plait bien et j'aimerais savoir si je pouvais le faire pour mon forum ? Il s'agit du titre du forum qui bouge vers la droite au passage de la souris ? comment faire ?

voici le forum en question => http://demo.nicetheme.com/forum?theme_id=193010

merci d'avance cordialement


Dernière édition par ptimich le Dim 23 Sep 2012 - 12:23, édité 1 fois

ptimich
*****

Masculin
Messages : 508
Inscrit(e) le : 05/03/2011

http://rihannafentyforum.com
ptimich a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte décaller au passage de la souris

Message par Hitoki le Jeu 20 Sep 2012 - 11:20

Coucou ptimich ^^

Le lien qui part vers la droite est un effet de transition ^^

En réglant ton padding-left avec une class a:focus, tu devrais pouvoir le refaire : )

Hitoki
**

Féminin
Messages : 79
Inscrit(e) le : 18/08/2007

http://deliquescence.forum-gratuit.cc/
Hitoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte décaller au passage de la souris

Message par ptimich le Jeu 20 Sep 2012 - 14:04


j'ai pas comprit lol qu'est ce que tu appelle "padding-left" ?

ptimich
*****

Masculin
Messages : 508
Inscrit(e) le : 05/03/2011

http://rihannafentyforum.com
ptimich a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte décaller au passage de la souris

Message par Hitoki le Jeu 20 Sep 2012 - 19:54

Le padding c'est l'espacement entre la bordure est le texte : )

Left, c'est le déplacé sur la gauche : )



Dernière édition par Hitoki le Ven 21 Sep 2012 - 18:13, édité 1 fois

Hitoki
**

Féminin
Messages : 79
Inscrit(e) le : 18/08/2007

http://deliquescence.forum-gratuit.cc/
Hitoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte décaller au passage de la souris

Message par benneke le Ven 21 Sep 2012 - 8:56

Hello,

en ajoutant une transformation CSS on obtient le même résultat que sur le forum que tu as montré.
pour avoir une explication en FR : http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html

Sinon un tuto plus complet en EN : http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/

Attention néanmoins que le CSS3 est relativement récent et que certains browser (IE évidemment) ne le prenne pas toujours en charge ! L'effet sera la, mais sans la transition ;-)

Dans l'exemple, ils ont fait :
Code:
a.forumlink {
    -moz-transition: all 1s ease 0s;
    border-bottom: 1px solid #84969B;
    border-left: 5px solid #84969B;
    display: block;
    font-family: courier;
    font-size: 24px;
    font-weight: bold;
    margin-left: 10px;
    padding-left: 10px;
    text-shadow: 0 0 1px #000000;
}
a.forumlink:hover {
    -moz-transition: all 1s ease 0s;
    border-bottom: 1px solid #C2E9F4;
    border-left: 5px solid #C2E9F4;
    display: block;
    font-style: italic;
    padding-left: 100px;
}
explication :
la première partie met en forme le titre, avec un display:block afin de pouvoir ajouter du padding à un élément de type inline (span, a, b, ...).
La seconde (indiquée avec la pseudoclasse :hover) met en forme quand la souris se trouve sur le texte. On retrouve le display:block sur l'élément ainsi qu'un padding-left de 100px qui déplace le texte. Attention que ce code ne fonctionne que sur Firefox, car les lignes de compatibilité n'ont pas été notées. Donc on doit ajouter :
Code:
-webkit-transition:; 
  -moz-transition:; 
  -o-transition:; 
  transition:;
transition est la notation universelle, -webkit-transition est pour Safari, -moz-transition est pour Firefox, -o-transition est pour Opéra.

Bonne lecture et bonne journée,

Ben

benneke
***

Messages : 150
Inscrit(e) le : 07/04/2012

http://www.guilde-aof.com
benneke a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte décaller au passage de la souris

Message par ptimich le Ven 21 Sep 2012 - 12:24

donc la faut que je colle les deux chanp et sa marche ?

ptimich
*****

Masculin
Messages : 508
Inscrit(e) le : 05/03/2011

http://rihannafentyforum.com
ptimich a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte décaller au passage de la souris

Message par benneke le Ven 21 Sep 2012 - 12:29

Faut adapter un peu le code a son utilisation Wink

Mais les balises sont déjà bonnes, suffit de vérifier les décallages...

Donc en principe ce code dans le CSS personalisé devrait le faire :
Code:
a.forumlink {
    -webkit-transition:all 1s ease 0s;
  -moz-transition:all 1s ease 0s;
  -o-transition:all 1s ease 0s;
  transition:all 1s ease 0s;
    border-bottom: 1px solid #84969B;
    border-left: 5px solid #84969B;
    display: block;
    font-family: courier;
    font-size: 24px;
    font-weight: bold;
    margin-left: 10px;
    padding-left: 10px;
    text-shadow: 0 0 1px #000000;
}
a.forumlink:hover {
-webkit-transition:all 1s ease 0s;
  -moz-transition:all 1s ease 0s;
  -o-transition:all 1s ease 0s;
  transition:all 1s ease 0s;
    border-bottom: 1px solid #C2E9F4;
    border-left: 5px solid #C2E9F4;
    display: block;
    font-style: italic;
    padding-left: 100px;
}

Le mieux est quand même de lire la doc pour comprendre le fonctionnement, comme cela on peut encore adapter a son contenu à soi...

Bonne journée,
Ben

benneke
***

Messages : 150
Inscrit(e) le : 07/04/2012

http://www.guilde-aof.com
benneke a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte décaller au passage de la souris

Message par ptimich le Ven 21 Sep 2012 - 12:48

oui j'ai lu un peut et je vais continuer je préfère comprendre le pourquoi du comment sa sert toujours

edite sa marche sur un forum teste mais pas le mien mdr ya toujours des problème mais je sais comment le résoudre merci beaucoup

ptimich
*****

Masculin
Messages : 508
Inscrit(e) le : 05/03/2011

http://rihannafentyforum.com
ptimich 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