Apparaat-mockups (CSS) New
One CSS frame that switches between phone, browser window and laptop, holding your own screenshot (here a rebuilt bakery site that reflows per device via container queries). Hover or focus on the screen scrolls the page slowly. Uses container units (cqw/cqh) with fixed px fallback; on touch and with reduced motion you scroll yourself. In production swap .dvm__page for a tall img.
How to use it
- Paste the HTML where the components 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.
<!-- Apparaat-mockups (CSS) · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="dvm"><div class="dvm__hd"><div class="dvm__sw" role="group" aria-label="Apparaat"><button type="button" class="dvm__b" aria-pressed="false" data-d="phone">Telefoon</button><button type="button" class="dvm__b" aria-pressed="true" data-d="browser">Browser</button><button type="button" class="dvm__b" aria-pressed="false" data-d="laptop">Laptop</button></div><span class="dvm__hint">hover of focus op het scherm</span></div>
<div class="dvm__view"><div class="dvm__dev" data-d="browser"><div class="dvm__bar" aria-hidden="true"><i></i><i></i><i></i><span>bakkerijvanloon.nl</span></div><a class="dvm__screen" href="#" aria-label="Demo-schermafbeelding van bakkerijvanloon.nl, scrolt bij focus"><div class="dvm__page" aria-hidden="true">
<div class="dvm__nav"><b>Van Loon</b><span><i></i><i></i><i></i></span></div>
<div class="dvm__hero"><p>Vers brood uit Deventer, sinds 1962</p><span>Bestel voor morgen</span></div>
<div class="dvm__grid"><div class="dvm__pr"><i></i><b>Desembrood</b><em>€ 4,25</em></div><div class="dvm__pr"><i></i><b>Deventer koek</b><em>€ 5,95</em></div><div class="dvm__pr"><i></i><b>Krentenbol</b><em>€ 0,85</em></div><div class="dvm__pr"><i></i><b>Spelt volkoren</b><em>€ 4,10</em></div><div class="dvm__pr"><i></i><b>Appeltaart</b><em>€ 17,50</em></div><div class="dvm__pr"><i></i><b>Roggebrood</b><em>€ 3,60</em></div></div>
<div class="dvm__band"><b>Ophalen of bezorgen</b><p>Elke ochtend vanaf 7.00 uur in de Brink 14, of bezorgd binnen Deventer.</p></div>
<div class="dvm__grid"><div class="dvm__pr"><i></i><b>Taarten</b><em>op bestelling</em></div><div class="dvm__pr"><i></i><b>Lunch</b><em>vanaf 11.00</em></div><div class="dvm__pr"><i></i><b>Catering</b><em>vanaf 20 p.</em></div></div>
<div class="dvm__foot"><b>Bakkerij Van Loon</b><span>Brink 14 · 7411 BS Deventer · KvK 08123456</span></div></div></a><div class="dvm__base" aria-hidden="true"></div></div></div></div>
</div>/* Apparaat-mockups (CSS) · NedDev · eigen werk. */
.dvm{position:absolute;inset:0;box-sizing:border-box;padding:12px 14px;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;display:flex;flex-direction:column;gap:10px}
.dvm__hd{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dvm__sw{display:flex;border:1px solid rgba(10,10,10,.18);border-radius:999px;padding:2px;background:#fff}
.dvm__b{font:600 11px 'Switzer',system-ui,sans-serif;border:0;background:none;color:#5f5e5a;padding:4px 10px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.dvm__b:hover{color:#0a0a0a}.dvm__b[aria-pressed="true"]{background:#0a0a0a;color:#fff}
.dvm__b:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.dvm__hint{font:500 9.5px 'JetBrains Mono',monospace;color:#6b6a66;text-align:right}
.dvm__view{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;container-type:size}
.dvm__dev{position:relative;display:flex;flex-direction:column;background:#fff;box-sizing:border-box;transition:width .45s cubic-bezier(.4,0,.2,1),height .45s cubic-bezier(.4,0,.2,1),border-radius .45s,border-width .45s;border:1px solid rgba(10,10,10,.22);border-radius:6px;box-shadow:0 10px 24px -14px rgba(10,10,10,.35)}
.dvm__dev[data-d="browser"]{width:min(96cqw,150cqh);height:min(64cqw,100cqh)}
.dvm__dev[data-d="phone"]{width:47cqh;height:98cqh;border:5px solid #0a0a0a;border-radius:20px}
.dvm__dev[data-d="laptop"]{width:min(80cqw,133cqh);height:min(50cqw,84cqh);border:6px solid #1c1c1c;border-bottom-width:9px;border-radius:9px 9px 2px 2px;margin-bottom:6cqh}
@supports not (width:1cqh){.dvm__dev[data-d="browser"]{width:300px;height:180px}.dvm__dev[data-d="phone"]{width:88px;height:180px}.dvm__dev[data-d="laptop"]{width:260px;height:160px}}
.dvm__dev[data-d="phone"]::before{content:"";position:absolute;z-index:3;top:5px;left:50%;width:30%;height:7px;transform:translateX(-50%);background:#0a0a0a;border-radius:6px}
.dvm__bar{flex:none;display:flex;align-items:center;gap:4px;height:18px;padding:0 7px;background:#ecebe8;border-bottom:1px solid rgba(10,10,10,.12);border-radius:5px 5px 0 0}
.dvm__bar i{width:6px;height:6px;border-radius:50%;background:#c9c7c2}
.dvm__bar span{margin-left:8px;flex:1;max-width:60%;background:#fff;border-radius:3px;font:500 8px/12px 'JetBrains Mono',monospace;color:#5f5e5a;padding:0 6px;white-space:nowrap;overflow:hidden}
.dvm__dev:not([data-d="browser"]) .dvm__bar{display:none}
.dvm__base{display:none;position:absolute;top:100%;left:-11%;width:122%;height:7px;margin-top:9px;background:linear-gradient(#d6d4cf,#b9b7b2);border-radius:0 0 9px 9px}
.dvm__base::before{content:"";position:absolute;top:0;left:42%;width:16%;height:3px;background:#a4a29d;border-radius:0 0 4px 4px}
.dvm__dev[data-d="laptop"] .dvm__base{display:block}
.dvm__screen{position:relative;flex:1;min-height:0;overflow:hidden;display:block;border-radius:0 0 5px 5px;outline:none;color:inherit;text-decoration:none}
.dvm__dev[data-d="phone"] .dvm__screen{border-radius:15px}
.dvm__dev[data-d="phone"] .dvm__nav{padding-top:15px}
.dvm__dev[data-d="laptop"] .dvm__screen{border-radius:3px}
.dvm__screen:focus-visible{box-shadow:inset 0 0 0 2px #F5480F}
.dvm__page{container-type:inline-size;transform:translateY(0);transition:transform 1s cubic-bezier(.45,0,.55,1);background:#fffaf2;color:#2b1d12;font-size:2.1cqi}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.dvm__screen:hover .dvm__page,.dvm__screen:focus-visible .dvm__page{transform:translateY(var(--dvm-y,0));transition-duration:4.5s}}
@media(hover:none),(prefers-reduced-motion:reduce){.dvm__screen{overflow-y:auto}.dvm__page{transition:none}}
.dvm__nav{display:flex;justify-content:space-between;align-items:center;padding:1.8cqi 3cqi}
.dvm__nav b{font-size:3cqi;letter-spacing:-.02em}
.dvm__nav span{display:flex;gap:1.5cqi}.dvm__nav i{width:4.2cqi;height:0.84cqi;background:#2b1d12;opacity:.5;border-radius:2px}
.dvm__hero{margin:0 3cqi;padding:4.2cqi 3cqi;background:#7a4a24;color:#fff6e9;border-radius:0.9cqi}
.dvm__hero p{margin:0 0 1.8cqi;font-size:4.5cqi;font-weight:700;line-height:1.05;max-width:70%}
.dvm__hero span{display:inline-block;background:#F5480F;color:#fff;font-size:1.92cqi;font-weight:600;padding:0.84cqi 1.8cqi;border-radius:99px}
.dvm__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8cqi;padding:3cqi}
.dvm__pr i{display:block;aspect-ratio:4/3;border-radius:0.9cqi;background:repeating-linear-gradient(135deg,#e9d4b6 0 4px,#e2c9a6 4px 8px)}
.dvm__pr b{display:block;margin-top:0.9cqi;font-size:2.04cqi}.dvm__pr em{font-style:normal;font-size:1.8cqi;opacity:.7}
.dvm__band{margin:0 3cqi;padding:3cqi;background:#2b1d12;color:#fff6e9;border-radius:0.9cqi}
.dvm__band b{font-size:3cqi}.dvm__band p{margin:0.9cqi 0 0;font-size:2.04cqi;line-height:1.35;opacity:.85}
.dvm__foot{padding:3cqi;display:flex;flex-direction:column;gap:0.6cqi;font-size:1.8cqi;border-top:1px solid rgba(43,29,18,.15)}
@container (max-width:120px){.dvm__page{font-size:6cqi}.dvm__grid{grid-template-columns:repeat(2,1fr)}.dvm__hero p{font-size:11cqi;max-width:none}.dvm__hero span{font-size:6cqi}.dvm__nav b{font-size:9cqi}.dvm__pr b{font-size:6.5cqi}.dvm__pr em,.dvm__foot{font-size:5.5cqi}.dvm__band b{font-size:8cqi}.dvm__band p{font-size:6cqi}.dvm__nav i{width:12cqi;height:2.5cqi}}
@media(max-width:420px){.dvm__hint{display:none}}// Apparaat-mockups (CSS) · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.dvm');if(!w)return;var dev=w.querySelector('.dvm__dev'),sc=w.querySelector('.dvm__screen'),pg=w.querySelector('.dvm__page');
function shift(){pg.style.setProperty('--dvm-y',-Math.max(0,pg.scrollHeight-sc.clientHeight)+'px');}
sc.addEventListener('pointerenter',shift);sc.addEventListener('focus',shift);sc.addEventListener('click',function(e){e.preventDefault();});
w.querySelectorAll('.dvm__b').forEach(function(b){b.addEventListener('click',function(){w.querySelectorAll('.dvm__b').forEach(function(x){x.setAttribute('aria-pressed',x===b?'true':'false');});dev.dataset.d=b.dataset.d;sc.scrollTop=0;});});
}
init(document.querySelector('.jouw-container'));More components
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 →