Is it possible to change the font color of a n active tab to an animation svg?
Is it possible to change the font color of a n active tab to an animation svg?
Hey I have an svg of a color animation, it's basically a gradient that loops around. And was wondering if it's possible to change the font color of the active tab to that svg animation.
I've been trying to do it with:
.tabbrowser-tab[selected] .tab-content{ text-color: url(../icons/animation.svg) !important; }
but can't get it to work.
Thanks for any help!
2
comments
I'm not sure about how the svg would work here (though it might work fine), but you can do that with just CSS as well:
@keyframes tab-gradient-anim{ from{ background-position-x: 0% } to{ background-position-x: 200% } } .tab-content[selected]{ background-image: linear-gradient( 90deg, rgb(255, 0, 0) 0%, rgb(255, 154, 0) 12%, rgb(208, 222, 33) 24%, rgb(79, 220, 74) 35%, rgb(63, 218, 216) 44%, rgb(47, 201, 226) 50%, rgb(28, 127, 238) 60%, rgb(95, 21, 242) 70%, rgb(186, 12, 248) 80%, rgb(251, 7, 217) 90%, rgb(255, 0, 0) 100% ); background-repeat: repeat-x; background-size: 200% 100%; animation: tab-gradient-anim 2s infinite linear; background-clip: text; color: transparent; }
2 0 ReplyPerfect!
Thank you so much!
1 0 Reply