CSS中的双色字体着色？

Question

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

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

Answer 1

我设法通过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中测试过.

请记住,重复一次显示的文本不是很语义.

根据你需要支持的浏览器,你可能会span在CSS中抛弃这样的内容...

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/