Есть ли чисто CSS хак для контраста с бэкграундом?

Question

[crdrads]

Набросал примерный конечный эффект, но он работает только на черном/белом. На других фонах появляется кислотный цвет и даже фильтры не работают почему-то (?) - https://codepen.io/dubdub/pen/yGeLjv
Было бы нормально если бы эту кислоту преобразовывать в оттенки серого.

Можно ли как-то решить только CSS? Маски, фильтры, клип и тд?

Comments

[crdrads]

Ankhena, отличное решение. Вынесите ответом, отмечу решением

Answer 1

[Ankhena]

Универсального варианта, без модификации стилей section, не придумалось.

Только такой: добавлять еще один mix-blend-mode, но уже для конкретных section. Либо luminosity для получения серого, либо color для получения белого цвета шрифта.

.red {
  background-color: red;
  mix-blend-mode: luminosity;
}

https://codepen.io/anon/pen/WLrPrm

Answer 2

[sergski]

У вас же используется mix-blend-mode: difference для заголовка. Вы контраст белого заголовка для белого бекграунда и сделали.)

Comments

[crdrads]

Спасибо кэп. И что дальше?

[sergski]

crdrads, ждете магии?))

[crdrads]

sergski, понятно, бесполезность