Finally, CSS based gradient text, no images
labs.dragoninteractive.com
Finally, CSS based gradient text, no images
1–10 of 27 posts
Re: Finally, CSS based gradient text, no images
#2i think you mean a css and javascript/jquery based gradient text.
doesn't seem to work too well with dark backgrounds, either. at least, in chrome.
Re: Finally, CSS based gradient text, no images
#3Interesting technique, but it does use JavaScript (but degrades nicely).
A couple of side-effects: Firefox 3.0.8 is pretty sluggish when scrolling (although it might be better with only one instance of this used), also you can't (visibly) select the text that has this applied to it.
Re: Finally, CSS based gradient text, no images
#4Interesting technique, but it does use JavaScript (but degrades nicely). A couple of side-effects: Firefox 3.0.8 is pretty sluggish when scrolling (although it might be better with only one instance of this used), also you can't (visibly) select the text that has this applied to it.
Looks good, but I also experienced unbearable sluggishness on Linux/Firefox when scrolling.
Specifically, Xorg and firefox processes use nearly all my CPU when I scroll.
It's unusable in its current form (at least on this system). Hopefully you can tune your code; this is a neat effect.
Re: Finally, CSS based gradient text, no images
#5Well, that’s horrible for accessibility.
Contrary to popular opinion, assisstive technology for the visually disabled piggybacks onto existing browsers and so gains the full benefits of Javascript. If you’re going to clone your text 52 times over, then your text will be read out 52 times by the browser. Oops.
Re: Finally, CSS based gradient text, no images
#6This works by duplicating the text, one copy for each pixel of height. The text is then clipped with overflow: hidden. The sluggishness on that page results from a couple hundred (thousand?) copies of the text positioned absolutely and needing to be clipped.
The description is here: http://labs.dragoninteractive.com/rainbows_article.php
Re: Finally, CSS based gradient text, no images
#7Finally? Forgive me, but I can't really see the need for CSS to pull this off on its own. With gradient text you're not looking to convey information (or at least, no more than the words would convey with any other css-available text effect), you're looking for a visual effect. Something that images handle rather well.
Re: Finally, CSS based gradient text, no images
#8Interesting technique, but it does use JavaScript (but degrades nicely). A couple of side-effects: Firefox 3.0.8 is pretty sluggish when scrolling (although it might be better with only one instance of this used), also you can't (visibly) select the text that has this applied to it.
Looks good, but I also experienced unbearable sluggishness on Linux/Firefox when scrolling. Specifically, Xorg and firefox processes use nearly all my CPU when I scroll. It's unusable in its current form (at least on this system). Hopefully you can tune your code; this is a neat effect.
Unusable for me on Linux/firefox too.
Re: Finally, CSS based gradient text, no images
#9It is barely readable in chrome. Everything is extremely aliased and there are some artifacts.
Re: Finally, CSS based gradient text, no images
#10The output looks really nice, but the implementation is not so great. Turn it into a service that outputs these in png format on the fly.