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

166

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

157

HTML

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

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

327

jQuery

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

144

jQuery

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

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

135