28172 sujets

CSS et mise en forme, CSS3

[Résolu] Comportement d'un dégradé sur un titre

Bonjour,

Il doit me manquer un élément avoir un beau rendu sur un dégradé sur un titre h2.
J'ai appliqué cette css :
.fusion-title h2 {
  color: #0055B8;
    background: linear-gradient(to right, #0055B8 0%, #00CE7C 50%, #93D500 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


En revanche, le rendu est différent selon l'endroit où se trouve mon titre et je ne comprends pas. Quand j'ai un titre court type NOS SOLUTIONS, quand il est centré ds une colonne, je n'ai quasiment que du vert alors que qd il est ferré à gauche, il a bien son dégradé. J'ai essayé de ne pas le centrer ds une seule col ms de mettre 3 col d'1/3 ms pas mieux.
Ci-joint une image du rendu. Je rate quoi ?

upload/1709221332-50580-capture.jpg

Si je mets mon h2 en inline, ça résout le pb ms dans ce cas, je n'arrive pas à gérer l'interlignage qd le titre est sur 3 lignes... que pourrais-je appliquer pr gérer l'interlignage, le line-height ne fonctionne pas.

Merci pour votre aide et bonne journée
Salut,

a priori il faut décomposer pour comprendre :
- Tu fais un gradient sur le background, il est basé sur toute la longueur de ton h2
- Ensuite tu viens faire un clip de ton texte sur ce background, sauf que si tu clip en ayant le texte au début au milieu ou à la fin, bah tu ne clip pas au même endroit du background et tu n'obtiens pas la même couleur.

Tu peux voir facilement où le clip à lieu en commentant les 2 lignes :
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

En solution, je ne sais pas si c'est possible d'avoir ton h2 qui fasse pile la taille du texte ? (si ça ne déborde pas tu clipera toujours au même endroit). Puis de positionner le titre via du flex pour centrer par exemple ?
Je pensais qu'une balise h2, un peu comme une balise strong s'appliquait juste au texte. Ms effectivement, en commentant les 2 lignes, je vois qu'il prend toute la largeur de ma colonne.
Un peu fastidieux ms je peux caler la largeur de ma colonne au nb de caractères du titre.
Je pense que c'est la seule solution ! Merci Smiley smile (et la prochaine fois qu'un graphiste utilise ça, je dis que c'est pas beau Smiley cligne
Modérateur
Bonjour,

Pas sûr d'avoir compris le problème, mais il me semble que line-height fonctionne avec un display: inline ou display: inline-block;

Exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
body
{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:0.5em;
}
h1
{
	grid-column:1 / -1;
}
section
{
	background:#ccc;
	text-align:center;
}
section:first-of-type
{
	text-align:left;
}
section:last-of-type
{
	text-align:right;
}
h2
{
	color: #0055B8;
	background: linear-gradient(to right, #0055B8 0%, #00CE7C 50%, #93D500 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display:inline;
	line-height:3em;
}
</style>
</head>
<body>
<h1>Nos solutions</h1>
<section>
<H2>Accueil</h2>
</section>
<section>
<H2>Nos solutions, nos belles solutions, nos très belles solutions</h2>
</section>
<section>
<H2>Nos solutions</h2>
</section>
</body>
</html>

Amicalement,
En effet, en rajoutant un span dans le h2 et que tu appliques le dégradé sur le span, tu obtiens la même longueur de span et donc le même dégradé, peu importe l'emplacement du span dans la balise h2 : https://jsfiddle.net/vts5q2yh/
Modifié par Mathieuu (01 Mar 2024 - 10:26)
Mathieuu a écrit :
En effet, en rajoutant un span dans le h2 et que tu appliques le dégradé sur le span, tu obtiens la même longueur de span et donc le même dégradé, peu importe l'emplacement du span dans la balise h2 : https://jsfiddle.net/vts5q2yh/


Oui c'est ce que j'ai fait et c'est nickel Smiley smile
Prévenir un modérateur
Répondre au sujet
Aller à