Hello tout le monde,
Qqn sait comment je peux faire cet effet ? J'ai déjà tronqué le texte avec un code mais l'effet flou/fumée blanche qui passe dessus, j'avoue que je pêche 😅
Merci !
Une div en absolute sur le texte, qui est un background gradient de plus en plus opaque ;) Ça pourrait faire ce que tu veux ?
Salut Camille oui j’aurai la même approche que @Tiphaine Durand cf tuto : https://www.youtube.com/watch?v=eUvCJX4ymdU
Yes j'ai essayé avant mais c'était pas ultra clean, ça me fait bricoler avec les paddings etc pour que l'effet soit vraiment diffus 😕 Après ça fonctionne en soit
… après avec un regard UX le texte qui part au blanc c’est pas ouf 😅 j’irai plus vers un “lire l’article” ou “en savoir plus” comme CTA
T'as raison Thiphaine, j'ai enlevé mon padding et j'ai plutôt touché au gradient
Je suis une VRAIE quiche avec les gradients donc j'évite de jouer avec... mais c'est mieux effectivement aha
Pour appuyer la proposition auprès de ton client : les effets sur les textes sont principalement attribués à des titrages (phrases courtes) comme premier niveau de lectures
Ouais je vois ce que tu veux dire Fabien... sauf que pour le coup c'est pas moi qui aie fait la maquette et je crois qu'elle aime vraiment beaucoup. en fait l'idée du site est d'être dans un bullet journal 🙂
Je vais lui en parler quand je la vois la semaine pro quand même 🙂 Merci !
Une ligne de gradient complètement custom c’est propre ;)
Joue avec les opacités des couleurs, on peut faire des petites merveilles avec
Yes, j'ai réussi à faire ce que je voulais ! Mais pas facile car j'ai du code qui tronque mon texte donc je dois vérifier sur la version publiée à chaque fois 😂
Merci beaucoup les amis 🔥
Ahhhh je vois, ton code tronqué tu peux pas le faire en full css ? (Le même qu’utilise client first avec la classe text-2-lines)
Avec plaisir ✨
Hum... j'ai utilisé le code de memberstack en fonction du nombre de caractères ! Je vais aller voir celui client first, ça m'arrangerait aha
.text-style-2lines {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
Remplace 2 par ton nombre de lignes ;)
N’oublie pas de mettre un pointer-events: none; sur ton gradient, sinon on ne pourra pas sélectionner le texte
Je vais lui en toucher un mot quand même ! Merci pour votre aide et pour les conseils 🙂
