CSS中的双色字体着色？

Question

我非常喜欢双色按钮和字体的外观。我想的是当字体的上半部分是一种颜色而下半部分是相同颜色的变体时。例如，请查看iPhone上的大部分按钮或徽标http://ming.ly。

是否可以在CSS中重新创建此效果？或者，我可以使用一个免费工具来生成看起来像这样的字体吗？

Answer 1

I managed to achieve that with CSS ...

实施例

CSS

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

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

HTML

<div>
    <span>Hello</span>
    Hello
</div>

jsFiddle

在Firefox 5中测试。

请记住，重复一次显示的文字不是很语义。

根据您需要支持的浏览器，您可以在CSS中抛弃内部span这样的内容......

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

jsFiddle

据我所知，content没有值会自动使用该元素的文本节点。您可以将其放在title属性上并使用attr(title)（或任何其他属性）。

您也可以使用JavaScript来重复。

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

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

如果第一个孩子不一定是文本节点，则可以使用element.textContent || element.innerText。

Answer 2

我非常喜欢@alex方法。另一种支持白色曲线的解决方案，但目前我认为*不是跨浏览器，可能如下：

<强> CSS

#text {
    color: #5283CA;
    font-size: 70px;
    height: 100px;
    overflow: hidden;
    width: 210px;
}
#curve {
    -moz-transform: rotate(60deg);
    -webkit-transform:rotate(60deg);
    -o-transform:rotate(60deg);
    -ms-transform:rotate(60deg);
    background: none repeat scroll 0 0 white;
    border-radius: 200px 20px 80px 20px;
    bottom: 270px;
    display: block;
    height: 1000px;
    opacity: 0.5;
    filter: alpha(opacity=50);
    position: relative;
    right: 330px;
    width: 200px;
}

<强> HTML

<div id="text">Mingly<div id="curve"></div>

演示： http://jsfiddle.net/ENPnU/

我不知道任何可以使边框弯曲的css属性。所以我使用了，我可以用css创建的圆角。然后我将带圆角的元素（在本例中为#curve）旋转到正确的位置，看起来像文本中的白色曲线。然后添加了白色不透明度。

*我尝试使其与ie一起使用，但我找不到完整的解决方案，你可以在这里找到结果：http://jsfiddle.net/3TpeA/