Two-tone font coloring in CSS?

Question

I really like the look of two-tone buttons and fonts. I am thinking of when the top half of the font is one color and the bottom half is a variation on the same color. For a

Answer 1

I managed to achieve that with CSS...

Example

CSS

div {
    position: relative;  
    color: #0f0;
    font-size: 28px;
}

div span {
    height: 50%;
    position: absolute;
    color: #f00;
    overflow: hidden;  
}

HTML

    Hello
    Hello

jsFiddle.

Tested in Firefox 5.

Keep in mind that it is not very semantic to repeat the text to be displayed once.

Depending on the browsers you need to support, you could ditch that inner span for something like this in the CSS...

div:before {
    content: "Hello";
    height: 50%;
    position: absolute;
    color: #f00;
    overflow: hidden;   
}

jsFiddle.

As far as I know, there is no value for content which will automatically use that element's text node. You could put it on the title attribute and use attr(title) (or any other attribute).

You could also use JavaScript to do the repeating.

var textRepeat = document.createElement('span'),
    textRepeatTextNode = document.createTextNode(element.firstChild.data);

element.appendChild(textRepeat.appendChild(textRepeatNode));

If the first child was not necessarily a text node, you could use element.textContent || element.innerText.