texte décaller au passage de la souris
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
texte décaller au passage de la souris
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
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
Re: texte décaller au passage de la souris
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 : )
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 : )
Re: texte décaller au passage de la souris
j'ai pas comprit lol qu'est ce que tu appelle "padding-left" ?
Re: texte décaller au passage de la souris
Le padding c'est l'espacement entre la bordure est le texte : )
Left, c'est le déplacé sur la gauche : )
Left, c'est le déplacé sur la gauche : )
Dernière édition par Hitoki le Ven 21 Sep 2012 - 18:13, édité 1 fois
Re: texte décaller au passage de la souris
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 :
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 :
Bonne lecture et bonne journée,
Ben
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;
}
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:;
Bonne lecture et bonne journée,
Ben
benneke- ***
- Messages : 150
Inscrit(e) le : 07/04/2012
Re: texte décaller au passage de la souris
donc la faut que je colle les deux chanp et sa marche ?
Re: texte décaller au passage de la souris
Faut adapter un peu le code a son utilisation
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 :
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
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
Re: texte décaller au passage de la souris
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
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
Sujets similaires
» Couleur du texte au passage de la souris
» Texte change de couleur au passage de la souris
» Texte qui défile et qui stop au passage de la souris
» Texte depliant au passage souris
» modifier le texte s'affichant lors du passage de la souris
» Texte change de couleur au passage de la souris
» Texte qui défile et qui stop au passage de la souris
» Texte depliant au passage souris
» modifier le texte s'affichant lors du passage de la souris
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum