CODEWITHSUNDEEP
htmlcsstext
user1497119
user1497119

Reputation: 473

Dual-Color Text

is there a way to achieve the effect in the sample below, without duplicating content, just using html and css?

So you basically have a Text that is color1 and background1 on one side and color2 plus background2 on the other side?

Example Code to copy:

<div style="width: 50%; background-color: black; overflow: hidden; height: 300px;display: inline-block;">
    <p style="width: 200%; color: white">
    I am multicolor text. Multicolor text i am. This really does feel great. However, to get this, i need duplicated content. Is there a css way to do the same effect without duplicated content? I am multicolor text. Multicolor text i am. This really does feel great. However, to get this, i need duplicated content. Is there a css way to do the same effect without duplicated content?
    </p>
    </div><div style="width: 50%; background-color: white; overflow: hidden; height: 300px;display: inline-block;">
    <p style="width: 200%; color: black; transform: translateX(-50%)">
    I am multicolor text. Multicolor text i am. This really does feel great. However, to get this, i need duplicated content. Is there a css way to do the same effect without duplicated content? I am multicolor text. Multicolor text i am. This really does feel great. However, to get this, i need duplicated content. Is there a css way to do the same effect without duplicated content?
    </p>
    </div>

Upvotes: 6

Views: 636

Answers (2)

Temani Afif
Temani Afif

Reputation: 272638

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>

Upvotes: 4

user149341
user149341

Reputation:

Yes, by setting the mix-blend-mode CSS property to the value difference. (I've also given an example of how you can create this background image without transform.)

As an added bonus, this also makes text selection work properly. :)

#main {
  background: linear-gradient(to right, #000 50%, #fff 50%);
}

#main > p {
  color: #fff;
  mix-blend-mode: difference;
}
<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>

Upvotes: 3

Related Questions