CSS中的双色字体着色？ [英] Two-tone font coloring in CSS?

问题描述

我真的很喜欢双音按钮和字体的外观。我想到的时候，上半部分的字体是一种颜色，下半部分是同一种颜色的变化。有关示例，请参阅iPhone上的大多数按钮或此处的标志 ...

示例

< h3> 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））; 
  

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

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 an example see most of the buttons on an iPhone or the logo here http://ming.ly.

Is it possible to recreate this effect in CSS? Alternately is there a free tool I can use to generate fonts that look like this?

解决方案

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

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

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.

这篇关于CSS中的双色字体着色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！