Having trouble applying a gradient to text that I kerned with Lettering.js/Kern.js. Here's the skinny:
Lettering.js separates each character in the word into separate spans with ascending classes. From there, you can adjust each letter's margin, therefore "kerning" it!
I guess there are two ways to go about it.. either using a transparent image with repeat-x and overlay it (hereafter method 1), or going down the webkit-only road and use a webkit-gradient as the fill color (method 2). At least theoretically speaking...
Neither way is working for me!
Method 1- How can I apply the image to ONLY the letters... instead of the negative space inbetween as well.
Method 2- what attribute do I set the gradient under to fill the text
Here's my code.. Thank you!
HTML:
<header>
<h1>LARA</h1>
</header>
CSS:
h1 {
font-family:FuturaStdExtraBold;
font-size:200px;
font-weight:normal;
font-style:normal;
color:#333e52;
//Method 1
background: url(../img/overlay_light.png) repeat-x;
text-shadow: 0 1px 3px rgba(0,0,0,1);
//Method 2
//-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(27,33,44,1)), color-stop(50%, rgba(255,255,255,1)), to(rgba(27,33,44,1)));
}
You need to use the magical webkit only:
-webkit-background-clip: text
or use SVG text and a gradient fill. (BTW You can use CSS letter spacing if you're doing webkit only, no need to clutter up your stuff with spans)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.