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

227
19 сентября 2019, 02:50

У меня есть два div шириной 50% каждый. Существует огромный заголовок h1, который должен иметь цвет этих двух элементов div. Я пробовал mix-blend-mode, но он дает мне несколько случайных цветов при настройке на разницу.

Моя цель - инвертировать цвета, но сохранить цвета div. Это файл codepen, я постарался сделать его максимально простым:
https://codepen.io/lukagurovic/pen/MLoZmj

Окончательный эффект должен выглядеть следующим образом:

http://jsfiddle.net/1uubdtz6/

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

Answer 1

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

body { 
  margin: 0; 
  --c1:#510035; 
  --c2:#E8E8E8; 
} 
body:hover { 
  --c1:#E8E8E8; 
  --c2:crimson; 
} 
 
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>

READ ALSO
Как сделать кнопку меняющую текст при каждом нажатии на нее?
HTML

Как сделать кнопку меняющую текст при каждом нажатии на нее?

 211
Как обернуть одни теги исключая другие без множества?
HTML

Как обернуть одни теги исключая другие без множества?

Нужно обернуть все теги в блокеarticle-section-post, исключая некоторые

 361
Как добавить товары в корзину? Не добавляется два товара
jQuery

Как добавить товары в корзину? Не добавляется два товара

 190
Расширить карусель на мобильном
jQuery

Расширить карусель на мобильном

Подскажите как карусель слева на мобильном сделать на всю страницу, как слайдерИли если у вас есть готовый пример, то поделитесь пожалуйста

 208