6 ms·
Finally, CSS based gradient text, no images
- noodle 17y agoi 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.
- RossM 17y agoInteresting 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 17y agoLooks 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 17y agoUnusable for me on Linux/firefox too.
- cvboss2 17y agosame for IE6
- nostrademons 17y agoPerformance is not a problem in Chrome, but readability is. It's virtually unreadable because of fuzzy text rendering.
- silentbicycle 17y agoThere 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 17y agoPossibly, 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.
- robin_reala 17y agoWell, 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 17y agoAlso 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 17y agoThis 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 http://labs.dragoninteractive.com/rainbows_article.php
- saturdayplace 17y agoFinally? 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.
- ssharp 17y agoYes, that "finally" was very questionable.
- potatolicious 17y agoOr 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.
- ghempton 17y agoIt is barely readable in chrome. Everything is extremely aliased and there are some artifacts.
- chaosmachine 17y agoThe 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.
- Sephr 17y agoThis 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 http://code.eligrey.com/css3/border-colors/styled.html (Only shows gradient in browsers that support CSS3 like FF3 & Safari 3)
- robin_reala 17y agoWhile 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.
- eli_s 17y agowhat 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!
- mynne 17y agoIt's people like you that make my job suck. Fuck you for using the word "finally."
- Batsu 17y agoI 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.
- erlanger 17y agoHoly crap, did you see the markup? At that rate, you could have CSS-based bitmaps.
- deleted 17y ago[deleted]
- ndunn2 17y agoAm I the only one who couldn't even select the resulting text? No good
- wlievens 17y agoIt scrolls terribly in my experience. They probably littered the dom with overlapping translucent divs or something.
- deleted 17y ago[deleted]