Two-Tone Font Coloring in CSS

Two-tone font coloring in CSS?

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.

Two colors in text in css

Here is a short example of what linear gradient can do

h1 {

  font-size: 72px;

  background: -webkit-linear-gradient(green, red);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

<h1>

The BLA BLA

</h1>

How to use two-toned font variants in CSS?

You can place the outline text inside the h1 and use absolute positioning instead of estimating the margin, as in this jsFiddle: http://jsfiddle.net/6SakC/4/

That also solves the problem with the text wrapping.

To avoid duplicating the text in the markup, you can use JavaScript to create the duplicate text, as in this jsFiddle: http://jsfiddle.net/6SakC/5/ (This might not be the best idea, though, since the text might get a moment to display without the outline, and JS is occasionally disabled in the browser settings.)

Text with two colors

Another possible option is to use SVG. You can create multi colored text in SVG using gradients. If two adjacent gradient stops are at the same position then you will get a sharp transition between colors. If two adjacent gradient stops are at different positions then you will get a smooth transition between colors. You can have as many color stops as you want. For example...

<svg width="200" height="80" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="bicolored">
            <stop offset="33%" stop-color="red"/>
            <stop offset="33%" stop-color="blue"/>
        </linearGradient>
        <linearGradient id="tricolored">
            <stop offset="33%" stop-color="red"/>
            <stop offset="33%" stop-color="green"/>
            <stop offset="66%" stop-color="green"/>
            <stop offset="66%" stop-color="blue"/>
        </linearGradient>
        <linearGradient id="smooth">
            <stop offset="33%" stop-color="red"/>
            <stop offset="66%" stop-color="blue"/>
        </linearGradient>
    </defs>
    <text x="0" y="20" fill="url(#bicolored)">Some bicolored Text</text>
    <text x="0" y="40" fill="url(#tricolored)">Some tricolored Text</text>
    <text x="0" y="60" fill="url(#smooth)">Some smooth gradient Text</text>
</svg>

Note that in SVG, the color stops are at relative positions (e.g. 0 to 1, 0% to 100%). This could make it a little hard if you are trying to place the color stops at specific pixel locations.

Note that in SVG, you have to manually position the text element within the svg element.

Two colors in text in css

Here is a short example of what linear gradient can do

h1 {

  font-size: 72px;

  background: -webkit-linear-gradient(green, red);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

<h1>

The BLA BLA

</h1>

Is it possible with CSS to make text's color fade between two colors?

Do you want something like that?

.blue-fade {

  font-size: 40px;

  font-family: Helvetica,Arial,sans-serif;

  font-weight: 100; 

  background: -webkit-linear-gradient(#1ba0d7, #002d3f);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

<p class="blue-fade">

368%

</p>

label.control-label

{

  display: flex;

}

label.control-label::before

{

  content: ':';

  order: 2;

}

label.control-label.required::after

{

   content: '*';

   color: red;

   order: 1;

}

<label class="control-label">Just a label</label>

<label class="control-label required">Required label</label>