

Finally, CSS based gradient text, no images - oni0n56
http://labs.dragoninteractive.com/rainbows_demo.php

======
robin_reala
Well, 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.

~~~
IsaacSchlueter
Also contrary to popular opinion, an img tag with an appropriate alt attribute
is very accessible (in any browser but IE, it's even resizable.)

------
JoelSutherland
This 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>

------
RossM
Interesting 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.

~~~
davidbnewquist
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.

~~~
rythie
Unusable for me on Linux/firefox too.

~~~
silentbicycle
There seems to be something really slow about javascript-heavy sites on Unix,
I think.

I'm really curious what the underlying cause is, if it's not just perception
bias on my part.

~~~
rythie
Possibly, since I don't use anything else I don't know (except in a virtual
machine). I get the impression however that the firefox people spend a lot of
time optimizing for MacOS and Windows that they don't spend on Linux for some
reason.

------
saturdayplace
Finally? 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.

~~~
potatolicious
Or if you're looking for something that scales nicely with screen resolution
or whatnot, SVGs. I'm really looking forward to vector graphics getting better
support in browsers - half the time we used bitmap images we really mean
something else.

------
Sephr
This uses JavaScript, not CSS.

CSS on the other hand, _does_ have a built-in way to do gradients (CSS3+):

    
    
        *-colors: #color1 #color2 #color3 #color4 ect
    

For example, this demo makes use of border-colors gradients and border-radius:
<http://code.eligrey.com/css3/border-colors/styled.html> (Only shows gradient
in browsers that support CSS3 like FF3 & Safari 3)

~~~
robin_reala
While that’s really neat (and something I didn’t know about) it’s not
something that makes an appearance in either the CSS3 Colors or Backgrounds &
Borders specs. Call it a vendor specific CSS extension rather than CSS3 for
the time being.

------
noodle
i 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.

------
ghempton
It is barely readable in chrome. Everything is extremely aliased and there are
some artifacts.

------
chaosmachine
The 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.

------
Batsu
I can appreciate the desire to have simple, CSS based solutions for somewhat
common requests -- though I would not consider gradient text a common request,
just work with me here -- solving the issue by coming up with some elaborate
solution that is generally reserved for crazy positioning problems to work
with IE5+ and modern browsers simultaneously is hardly a good approach.

That was a long sentence.

------
ndunn2
Am I the only one who couldn't even select the resulting text? No good

------
wlievens
It scrolls terribly in my experience. They probably littered the dom with
overlapping translucent divs or something.

------
eli_s
what a terrible solution to a non-existent problem. This doesn't even work as
a proof of concept - I can't think of a single scenario where this technique
would be useful.

Talk about killing a fly with a sledgehammer!

------
erlanger
Holy crap, did you see the markup? At that rate, you could have CSS-based
bitmaps.

