Display text color based on background they are on

Question

what I want is pretty simple but I didn't find what I exactly wanted on internet.

Having the following image:

, what I want to do is text to be asymmetric. TEXT (and that portion of W) to be white and ITH BLUE, same thing with the inspiration part (INSPIR to be white and ATION dark blue).

What I did till now (by the way I didn't expected to be so easy):

.welcome-page-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  position: relative;
}

.col-md-6 {
  display: flex;
  width: 100%;
}

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
}

#first-half {
  background-color: #3A5082;
  color: #F5F9FF;
}

#second-half {
  background-color: #F5F9FF;
  color: #3A5082;
}

I think this should be implemented with js and maybe scss? I don't know to be honest, so any help is apreciated.

As a PS: This thing should be pretty responsive, so using span or something like that is not an option.

You will need either some JS canvas library or a lot of pseudo element magic — ptts, Dec 16 '20 at 19:35
Unless there is a library available to do this, such behavior would involve using `canvas` and would likely be wildly complicated. If the text itself is static, I think it would be MUCH easier to just create images of what you want before hand and to reference those instead — Pytth, Dec 16 '20 at 19:37
maybe this would help you: https://css-tricks.com/reverse-text-color-mix-blend-mode/ — Nikas music and gaming, Dec 16 '20 at 19:57

score 1 · Accepted Answer · edited Dec 16 '20 at 20:40

You can study mix-blend-mode CSS property. Here I've shared just an example. You should dive deep for understanding the blending.

.container {
  position: relative;
  width: 400px;
}
.wrapper {
  display: flex;
  
}

.left {
  background: #463c84;
  height: 100vh;
  width: 50%;
}
.right {
  background: white;
  width: 50%;
}


.header {
  flex: 1;
  position: absolute;
  top: 20%;
  left: 21%;
  background: inherit;
}

.header h1 {
  color: #fff;
  mix-blend-mode: difference;
}

<div class="container">
  <div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="header">
    <h1 class="blend">TEXT WITH INPIRATION</h1>
  </div>
</div>

score 1 · Answer 2 · answered Dec 16 '20 at 20:34

You may also use background gradient and background-clip . custom CSS var(can be handy to set those colors for a reusable piece of code :

example with a filter hue-rotate to show different colors

:root {
/* set both gradient colors  */
  --color1: #453C84;
  --color2: #ffffff;
  /* color to use where background-clip is involved */
  --blend: transparent;
}

body {
  margin: 0;
}

.split-colors {
  height: 100vh;
  display: flex;
  background: linear-gradient(to right, var(--color1) 50%, var(--color2) 50%);
}

h1 {
  margin: auto;
  background: linear-gradient(to right, var(--color2) 50%, var(--color1) 50%);
  color: var(--blend);
  background-clip: text;
}

html {
  background: white;
  animation: hue-rotate 5s infinite;
}

@keyframes hue-rotate {
  50%{
    filter: hue-rotate(180deg)
  }
}

<div class="split-colors">
  <h1>TEXT WITH<br> INSPIRATION</h1>
</div>

Display text color based on background they are on

2 Answers2