Как инвертировать цвет текста обводки в зависимости от фона - PullRequest
Новая
       54

Как инвертировать цвет текста обводки в зависимости от фона

0 голосов
/ 04 февраля 2019

У меня есть 2 деления шириной 50% каждый.Существует огромный заголовок h1, который должен иметь цвет этих двух элементов div.Я пробовал режим смешивания, но он дает мне несколько случайных цветов при настройке на разницу.Моя цель - инвертировать цвета, но сохранить цвета div.Это файл codepen, я постарался сделать его максимально простым: https://codepen.io/lukagurovic/pen/MLoZmj В этом примере предполагается, что конечный эффект будет выглядеть следующим образом:

https://jsfiddle.net/1uubdtz6/

но я не уверен, почему он не работает с этими цветами.Кроме того, эти элементы div являются интерактивными, поэтому цвет должен динамически изменяться по мере увеличения ширины элемента div при наведении, и должен быть только штрих текста без заливки 

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>

1 Ответ

0 голосов
/ 04 февраля 2019

Одной из идей является дублирование текста и использование переменной CSS для определения цвета, чтобы вы могли легко изменить их в одном месте.Я использовал клип-путь, чтобы скрыть половину одного текста и показать другую: 

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>
...