Dual-Color Text

You can also use background-clip:text to color the text with a gradient and you can easily have any combination of color:

#main {  background: linear-gradient(to right, red 50%, #fff 50%);}
#main>p {  background: linear-gradient(to left, blue 50%, #fff 50%);  display: inline-block;  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;  color:transparent;}

<div id="main">  <p>I am multicolor text. Multicolor text i am. This really does feel great. No duplicated content was needed for this effect. It's created by using blending effects. I am multicolor text. Multicolor text i am. This really does feel great. No duplicated    content was needed for this effect. It's created by using blending effects.</p></div>

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>

How to set different colors in HTML in one statement?

You could use CSS for this and create classes for the elements. So you'd have something like this

p.detail { color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20 }
span.name { color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20 }

Then your HTML would read:

<p class="detail">My Name is: <span class="name">Tintinecute</span> </p>

It's a lot neater then inline stylesheets, is easier to maintain and provides greater reuse.

Here's the complete HTML to demonstrate what I mean:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <style type="text/css">
    p.detail { color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20 }
    span.name { color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20 }
    </style>
</head>
<body>
    <p class="detail">My Name is: <span class="name">Tintinecute</span> </p>
</body>
</html>

You'll see that I have the stylesheet classes in a style tag in the header, and then I only apply those classes in the code such as <p class="detail"> ... </p>. Go through the w3schools tutorial, it will only take a couple of hours and will really turn you around when it comes to styling your HTML elements. If you cut and paste that into an HTML document you can edit the styles and see what effect they have when you open the file in a browser. Experimenting like this is a great way to learn.

Multi-Colored Text in one line

Not quite sure what you're after, but if you want the font color to be based on an attribute you can use data. The nice thing about this approach instead of using ids, is that you can easily set/get the values or elements with Javascript if needed.

Also, you should be using span tags rather than a.

body {  background-color: #1A1A1D;}
.header {  text-align: center;  font-size: 48px;}
span[data-color] {  text-shadow: 2px 2px #000000;}
span[data-color="super"] {  color: #FF6447;}
span[data-color="bone"] {  color: #FFB951;}
span[data-color="craft"] {  color: #FFF547;}

<div class="header">  <span data-color="super">SUPER</span><span data-color="bone">BONE</span><span data-color="craft">CRAFT</span></div>

how can i create a textview with two color text?

You can use SpannableString to achieve the same.

TextView TV = (TextView)findViewById(R.id.textView);

Spannable wordtoSpan = new SpannableString("search in Sample Shop");        

wordtoSpan.setSpan(new ForegroundColorSpan(Color.BLUE), 0, 9, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

wordtoSpan.setSpan(new ForegroundColorSpan(Color.RED), 10, 21, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

TV.setText(wordtoSpan);

Dual-Color Text

Dual-Color Text

Text with two colors

Two colors in text in css

How to set different colors in HTML in one statement?

Multi-Colored Text in one line

how can i create a textview with two color text?

Related Topics

Leave a reply