ppowell777
Coder
[CODE lang="css" title="linear-gradient"].halloween {
background-image: linear-gradient(to left, black, orange);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
}
.christmas {
background-image: linear-gradient(to left, green, crimson);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
} [/CODE]
Using these CSS classes I want to be able to change the color of words to reflect these classes in their entire gradient. This works for larger words and phrases, but for smaller words, like "Christmas Day" for .christmas, or "Halloween" for .halloween, the change isn't complete, especially since the font is 12px:
[CODE lang="html" title="HTML"]<span id="halloween" class="halloween">Halloween</span><br /><br />
<span id="christmas" class="christmas">Christmas</span> [/CODE]
Does anyone know any other tricks that I would need to do to ensure that the gradient takes place for even smaller words, or is it even possible?
Thanks
background-image: linear-gradient(to left, black, orange);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
}
.christmas {
background-image: linear-gradient(to left, green, crimson);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
} [/CODE]
Using these CSS classes I want to be able to change the color of words to reflect these classes in their entire gradient. This works for larger words and phrases, but for smaller words, like "Christmas Day" for .christmas, or "Halloween" for .halloween, the change isn't complete, especially since the font is 12px:
[CODE lang="html" title="HTML"]<span id="halloween" class="halloween">Halloween</span><br /><br />
<span id="christmas" class="christmas">Christmas</span> [/CODE]
Does anyone know any other tricks that I would need to do to ensure that the gradient takes place for even smaller words, or is it even possible?
Thanks