5062 sujets

Sémantique web et HTML

Bonjour,

Je ne trouve pas mon bonheur sur internet donc je m'adresse à vous.
Je suis en train de faire un portfolio et le dev web n'est pas ma spécialité donc je vous explique.

J'ai un titre avec dont voilà le code :
<h1 data-letters="Portfolio DOE John">Portfolio<br>DOE John</h1>


J'utilise un effet pour qu'au survol de la souris, le même texte viens de la gauche pour ce calqué sur le texte de base mais avec une couleur différente.

Le problème c'est que dans l'attribut data-letters, il n'y a pas la balise <br>, donc comment faire un saut de ligne dans l'attribut ?

Merci à vous.

Cordialement.
Salut

Déjà si tu veux changer la couleur d'un texte, pourquoi tu passe par un data attribut ?

pourquoi ne pas récupérer la vrai valeur de ta balise

("h1").html() ?
Bonjour,

Merci de vos réponse.
Il s'agit de l'effet Kukuri sur cette page : https://tympanus.net/Development/TextStylesHoverEffects/
Qui utilise un attribut justement. C'est ma faute j'aurais du vous mettre cela dès le début.

<h1 class="link link--kukuri" data-letters="Portfolio DOE John">Portfolio<br>DOE John</h1>


Au survole de la souris, il y aura l'effet de la barre qui traverse et ensuite il y aura une image dans le texte a la place de la transition de couleur. Pour l'instant j'ai régler le problème avec un span mais ça le fait uniquement sur le Portfolio ou sur DOE John mais pas les 2 en même temps.

<h1><span class="link link--kukuri" data-letters="Portfolio">Portfolio</span><br><span class="link link--kukuri" data-letters="DOE John">DOE John</span></h1>


Si vous avez une idée ?

Cordialement.
Modifié par Thoriak (04 May 2019 - 14:35)
aliasdmc
Merci beaucoup pour ta solution, ça marche super.
Un petit soucis car mon :before commence trop loin du coup il y a un décalage avec le texte du dessous. Cela viens du fat que j'ai un
text-align : center
mais je vais me débrouiller Smiley cligne

Merci encore.
Modifié par Thoriak (08 May 2019 - 14:25)