Does it work?
your HTML header. From there, any
<h1> tag with the
will be styled with the overlay effect. It's also up to you to edit the
CSS in order to make it work — be sure to check the CSS file we made as
a starting point.
Also, the text is actually selectable (with a couple of caveats — see below). Having the text as part of the document makes some fun experiments possible — try translating it!
How is this done?
The JS is pretty simple, looking for headings with the
attribute and appending another identical heading with the
attribute. In this way, this:
<h1 class="colorfont">Hola mundo!</h1>
<div class="colorfont-container"> <h1 class="colorfont">Hola mundo!</span> <span class="colorfont-overlay">Hola mundo!</span> </div>
The CSS file takes care of defining the typefaces and colors used for this effect.
There's a limitation of HTML that we ran into, which is that any extra text element must be explicitly declared in the DOM. This is a semantics problem, since it litters the document with redundant data (in this case, an extra header) in order to achieve a visual effect.
We did try working around this issue by trying to get this effect through CSS, but a slew of other issues popped up, and we lost the ability to select text with that approach. Sadly, we couldn't find a cleaner way to accomplish this effect. If you can shed some light on this, let us know in the comments!
This shortcoming also reveals itself once you try to copy and paste the heading — it returns repeated lines. Anyone familiar with semantic structure of HTML documents will correctly point this as a no-no (having duplicate headers just for stylistic effect). We agree, but can't help feeling a bit powerless and longing for an easy and elegant solution for complex, multi-colored text effects on the web.
Finally, the effect can only be applied on
Bug us in the comments if you need more.
Can i use it?
Sure! Get the colorfont.js file and include it inside your document. Check the source of our demo in order to get a feel of how things work. If you're stumped, leave a comment and we'll try to get you going.
What's the license?
Colorfont.js is available under the WTFPL.