Header met mix-blend difference New
White header with mix-blend-mode: difference that inverts itself over white, black and photo areas and stays readable. Caveat: on saturated brand colour white turns complementary (orange becomes blue), so use a dark variant there. Fallback without blend support: solid black bar. Button compares with and without blend.
[ wit vlak ]
Interieurontwerp voor kantoren en praktijken in Rotterdam.
[ foto ]
[ zwart vlak ]
142 werkplekken ingericht in 2025, van Kralingen tot Katendrecht.
[ beton ]
Eén logo, één kleur code. Geen tweede header nodig.
[ merkkleur: let op ]
Op verzadigde kleur wordt wit blauw. Kies hier een donkere variant.
How to use it
- Paste the HTML where the navigation & menus should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Header met mix-blend difference · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hdf"><div class="hdf__sc" tabindex="0" aria-label="Voorbeeldpagina met header over lichte en donkere vlakken">
<div class="hdf__hd" role="banner"><a class="hdf__logo" href="#">Studio Kade</a><nav class="hdf__nav" aria-label="Hoofdmenu"><a href="#">Werk</a><a href="#">Diensten</a><a class="hdf__cta" href="#">Contact</a></nav></div>
<div class="hdf__s hdf__s--wit"><span class="hdf__lb">[ wit vlak ]</span><p class="hdf__t">Interieurontwerp voor kantoren en praktijken in Rotterdam.</p></div>
<div class="hdf__s hdf__s--foto"><span class="hdf__lb">[ foto ]</span></div>
<div class="hdf__s hdf__s--zwart"><span class="hdf__lb">[ zwart vlak ]</span><p class="hdf__t">142 werkplekken ingericht in 2025, van Kralingen tot Katendrecht.</p></div>
<div class="hdf__s hdf__s--beton"><span class="hdf__lb">[ beton ]</span><p class="hdf__t">Eén logo, één kleur code. Geen tweede header nodig.</p></div>
<div class="hdf__s hdf__s--oranje"><span class="hdf__lb">[ merkkleur: let op ]</span><p class="hdf__t">Op verzadigde kleur wordt wit blauw. Kies hier een donkere variant.</p></div>
</div><button class="hdf__tg" type="button" aria-pressed="true">Blend aan</button></div>
</div>/* Header met mix-blend difference · NedDev · eigen werk. */
.hdf{position:absolute;inset:0;background:#fff;font-family:'Switzer',system-ui,sans-serif;container-type:size}
.hdf__sc{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.hdf__sc::-webkit-scrollbar{display:none}
.hdf__sc:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.hdf__hd{position:sticky;top:0;z-index:3;height:44px;margin-bottom:-44px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:#fff;mix-blend-mode:difference}
.hdf__logo{font:800 14px/1 'Switzer',sans-serif;letter-spacing:-.02em;color:#fff;text-decoration:none}
.hdf__nav{display:flex;align-items:center;gap:12px}
.hdf__nav a{font:500 12px/1 'Switzer',sans-serif;color:#fff;text-decoration:none;background-image:linear-gradient(#fff,#fff);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;padding:3px 0;transition:background-size .2s}
.hdf__nav a:hover{background-size:100% 1px}
.hdf__nav .hdf__cta{border:1px solid #fff;border-radius:999px;padding:6px 11px;background-image:none;transition:background .18s,color .18s}
.hdf__nav .hdf__cta:hover{background:#fff;color:#000}
.hdf__hd a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hdf.is-uit .hdf__hd{mix-blend-mode:normal}
@supports not (mix-blend-mode:difference){.hdf__hd{background:#0a0a0a;margin-bottom:0}}
.hdf__s{min-height:74cqh;padding:58px 14px 18px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.hdf__lb{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.hdf__t{margin:0;font:700 clamp(16px,5.4cqi,28px)/1.1 'Switzer',sans-serif;letter-spacing:-.02em;max-width:24ch}
.hdf__s--wit{background:#fff;color:#0a0a0a}
.hdf__s--foto{background:#556 url('https://neddev.com/lab-media/hero-media-groeit-1.webp') center/cover;color:#fff}
.hdf__s--zwart{background:#0a0a0a;color:#fff}
.hdf__s--beton{background:#f4f3f1;color:#0a0a0a}
.hdf__s--oranje{background:#F5480F;color:#0a0a0a}
.hdf__tg{position:absolute;right:10px;bottom:10px;z-index:4;font:600 11px/1 'Switzer',sans-serif;padding:7px 11px;border-radius:999px;border:1px solid #0a0a0a;background:#fff;color:#0a0a0a;cursor:pointer;transition:background .18s,color .18s}
.hdf__tg:hover{background:#0a0a0a;color:#fff}
.hdf__tg:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.hdf__tg[aria-pressed="false"]{background:#F5480F;border-color:#F5480F;color:#fff}// Header met mix-blend difference · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.hdf')||root;function lab_drift(sc,host,speed){if(matchMedia('(prefers-reduced-motion: reduce)').matches)return;var on=true,t0=0;function stop(){on=false;}
['wheel','touchstart','pointerdown','keydown','focusin'].forEach(function(ev){host.addEventListener(ev,stop,{passive:true});});
function f(now){if(!on)return;if(!t0)t0=now;var max=sc.scrollHeight-sc.clientHeight,ph=(now-t0)/1000*speed;sc.scrollTop=max*(.5-.5*Math.cos(ph));requestAnimationFrame(f);}
setTimeout(function(){if(on)requestAnimationFrame(f);},900);}
var sc=root.querySelector('.hdf__sc'),tg=root.querySelector('.hdf__tg');
tg.addEventListener('click',function(){var aan=tg.getAttribute('aria-pressed')==='true';tg.setAttribute('aria-pressed',aan?'false':'true');tg.textContent=aan?'Blend uit':'Blend aan';root.classList.toggle('is-uit',aan);});
lab_drift(sc,root,.3);
}
init(document.querySelector('.jouw-container'));More navigation & menus
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →