Dégradé sur le texte ?

Elargir les débats

First featurette heading. It'll blow your mind

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu massa ut urna mollis eleifend et sed velit. Integer viverra erat vel aliquet lacinia. Vestibulum sed nisi eu ex aliquam pretium eu sed enim. Morbi dapibus nisi eu nibh tempus, id vulputate velit efficitur. Quisque tristique luctus lacinia. Donec aliquet in ante vitae vulputate. Vestibulum eu massa ut urna mollis eleifend et sed velit. Integer viverra erat vel aliquet lacinia.

Oh yeah, it's that good. See for yourself

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique luctus lacinia. Donec aliquet in ante vitae vulputate. Vestibulum eu massa ut urna mollis eleifend et sed velit. Integer viverra erat vel aliquet lacinia. Vestibulum sed nisi eu ex aliquam pretium eu sed enim. Morbi dapibus nisi eu nibh tempus, id vulputate velit efficitur. Curabitur augue diam, dapibus non blandit eu, consectetur euismod mi. Sed gravida ipsum vitae neque vulputate, a tristique mauris rutrum.

 <article class="color-1 padded txt-color-5"> 
<header class="two-third-xl">
    <h3><span class="is-regular">First featurette heading.</span> <span class="is-gradient-red-yellow">It'll blow your mind</span></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu massa ut urna mollis eleifend et sed velit. Integer viverra erat vel aliquet lacinia.
        Vestibulum sed nisi eu ex aliquam pretium eu sed enim. Morbi dapibus nisi eu nibh tempus, id vulputate velit efficitur. Quisque tristique luctus lacinia. Donec aliquet in ante vitae vulputate. Vestibulum eu massa ut urna mollis eleifend et sed velit. Integer viverra erat vel aliquet lacinia.</p>
</header>
 
</article>

<article class="padded"> 
  <header class="two-third-xl">
    <h3><span class="is-regular">Oh yeah, it's that good.</span> <span class="is-gradient-red-yellow">See for yourself</span></h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique luctus lacinia. Donec aliquet in ante vitae vulputate. Vestibulum eu massa ut urna mollis eleifend et sed velit. Integer viverra erat vel aliquet lacinia.
        Vestibulum sed nisi eu ex aliquam pretium eu sed enim. Morbi dapibus nisi eu nibh tempus, id vulputate velit efficitur. Curabitur augue diam, dapibus non blandit eu, consectetur euismod mi. Sed gravida ipsum vitae neque vulputate, a
        tristique mauris rutrum.
    </p>
    </header>
</article> 

Notes

 /* Effet sur le TEXTE */
.is-gradient-red-yellow {
	background: var(--gradient-red-yellow);
	/* background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#e52e71)); */
	/* background: linear-gradient(90deg, #ff8a00, #e52e71); */
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	text-shadow: none;
} 

Notes

  • 30.11.21 : Expérimentation à partir du design du site css-tricks

Où ça se trouve ?

Dans le fichier /libraries/_gradienttxt-fx.scss