3

I have 2 divs 50% width each. There is a huge header h1 which should have the color of these two divs. I have tried mix-blend-mode but it gives me some random colors when set to difference. My goal is to invert the colors but to keep the colors of the divs. This is a codepen file, I have tried to keep it as simple as possible: https://codepen.io/lukagurovic/pen/MLoZmj The final effect is supposed to look like on in this example:

https://jsfiddle.net/1uubdtz6/

but I am not sure why doesn't it work with these colors. Also, these divs are interactive so the color has to change dynamicly as divs are increasing in width when hovered, and there should be only stroke of text without any fill

body {
  height: 100vh;
  width: 100%;
  position: relative;
  background-color: #510035;
  margin: 0 auto;
}   

h1 {
  font-size: 4.7em;
  text-transform: uppercase;
}

.half-pager {
  width: 50%;
  height: 100%;
  position: absolute;
  display: inline-block;
  overflow: hidden;
  text-align: center;
}

.half-pager-dark {
  background-color: #510035;
}
.half-pager-light {
  right: 0;
  background-color: #E8E8E8;
  float: right;
}

.lp-header {
  position: absolute;
}
.lp-header {
  color:transparent;
  mix-blend-mode: difference;
  -webkit-text-stroke: 3px rgb(126, 124, 133); 
  z-index: 1;
}

.lp-header {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div id="box" class="half-pager half-pager-dark"></div>
<div id="box1" class="half-pager half-pager-light"></div>
<h1 class="lp-header">left or right</h1>
Meraj al Maksud
  • 1,528
  • 2
  • 22
  • 36
Luka
  • 171
  • 1
  • 1
  • 19
  • 1
    can you show the intended result? what color you want to invert? – Temani Afif Feb 04 '19 at 14:04
  • I dont have a coded version but what I ment was that part of text which is on the red background should have the color of white div and the part of text on white background shoud have color of the left(red) div. Something closest to this : http://jsfiddle.net/1uubdtz6/ just with the colors I have. I have tried to use this code but it didn't work for me – Luka Feb 04 '19 at 14:07
  • Possible duplicate of [Dual-Color Text](https://stackoverflow.com/questions/53328570/dual-color-text) – Meraj al Maksud Jul 28 '19 at 13:23

1 Answers1

3

One idea is to duplicate the text and use CSS variable to define the color so you can easily change them in one place. I used clip-path to hide half of one text and show the other half:

body {
  margin: 0;
  --c1:#510035;
  --c2:#E8E8E8;
}
body:hover {
  --c1:red;
  --c2:blue;
}

h1 {
  font-size: 4.7em;
  text-transform: uppercase;
  margin: 0;
}
.first {
  background:var(--c1);
  -webkit-text-stroke: 3px var(--c2);
}

.second {
  background:var(--c2);
  -webkit-text-stroke: 3px var(--c1);
  clip-path:polygon(0% 0%, 50% 0%, 50% 100%,0% 100%);
}

.lp-header {
  position:absolute;
  top:0;
  left:0;
  right:0;
  min-height:100vh;
  box-sizing:border-box;
  color: transparent;
  z-index: 1;
  padding: 50px;
  text-align: center;
  transition:0.5s;
}
<h1 class="lp-header first">left or right</h1>
<h1 class="lp-header second">left or right</h1>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • This would be a good solution but on the project these divs are interactive and they are changing the width on hover and this would follow it as far as I understand this snippet. Also, I just need a stroke of text, without any fill – Luka Feb 04 '19 at 14:25
  • @Luka ok, can you edit the quesiton to make it more clear that you want the stroke and that the colors are dynamic? – Temani Afif Feb 04 '19 at 14:27
  • Exactly what I need! Thank you very much for your time – Luka Feb 04 '19 at 14:39