Hello everyone, I found the site https://choice.studio Scroll down, the menu icon changes color depending on bg, how can this be done? can this script help http://www.kennethcachia.com/background-check/ ? Even tips will help, thanks in advance

    1 answer 1

    There is a CSS rule - mix-blend-mode . Read here https://developer.mozilla.org/ru/docs/Web/CSS/mix-blend-mode . Well, an example at the same time

     *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; outline: 0; } /*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/ .module-mixed-color { position: relative; height: 150px; width: 300px; border: 2px solid #000; margin: 50px auto; background: -webkit-gradient(linear, left top, right top, color-stop(50%, #ffffff), color-stop(50%, #000000)); background: -webkit-linear-gradient(left, #ffffff 50%, #000000 50%); background: -o-linear-gradient(left, #ffffff 50%, #000000 50%); background: linear-gradient(to right, #ffffff 50%, #000000 50%); } .module-mixed-color>.text { position: absolute; height: 100%; line-height: 200%; width: 100%; text-align: center; font-weight: bold; font-size: 60px; color: #fff; mix-blend-mode: difference; } 
     <div class="module-mixed-color"> <div class="text">TEXT</div> </div>