texte décaller au passage de la souris

3 participants

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 Mer 19 Sep 2012 - 17: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 - 6:23, édité 1 fois
ptimich

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 Jeu 20 Sep 2012 - 5: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

Hitoki
***

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

https://deliquescence.actifforum.com/
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 Jeu 20 Sep 2012 - 8:04


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

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 Jeu 20 Sep 2012 - 13: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 - 12:13, édité 1 fois
Hitoki

Hitoki
***

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

https://deliquescence.actifforum.com/
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 Ven 21 Sep 2012 - 2: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
avatar

benneke
***

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

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 Ven 21 Sep 2012 - 6:24

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

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 Ven 21 Sep 2012 - 6: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
avatar

benneke
***

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

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 Ven 21 Sep 2012 - 6: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

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

- Sujets similaires

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