NedDev®
EN Get in touch
Home Werk
Diensten
SaaS bouwenAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOWebshop bouwen
Oplossingen
AI-oplossingenB2B-platformsE-commerceHorecaLead generationLogistiekOnderwijsProcesautomatiseringSaaS-platformsStartup MVPVastgoedZorg
Branches
JuridischZorgVastgoedFinanceHoreca
Regio
Den HaagRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
OverWerkwijzeLabBlogContact

Sectiescheiders met vorm Nieuw

Zes scheiders tussen twee secties: golf, tanden, schaakbord, schulp, pixeltrap en boog, plus drie kleurcombinaties. Inline SVG (patterns voor de herhalende vormen, preserveAspectRatio="none" voor golf en boog) met fill: currentColor, zodat de scheider altijd de kleur van de volgende sectie heeft. Wisselen gaat met :has() op keuzerondjes, pure CSS, werkt overal.

Vorm
Kleur
WerkwijzeIn vier stappen naar je nieuwe tuin
01 Intake02 Ontwerp03 Aanleg04 Nazorg

Zo gebruik je het

  1. Plak de HTML op de plek waar het onderdeel moet komen.
  2. Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
  3. Geen JavaScript nodig.
<!-- Sectiescheiders met vorm · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ssd">
  <div class="ssd__pick">
    <fieldset class="ssd__set"><legend class="ssd__lg">Vorm</legend>
      <label><input type="radio" name="ssd-v" value="golf" checked><span>Golf</span></label><label><input type="radio" name="ssd-v" value="tand"><span>Tanden</span></label><label><input type="radio" name="ssd-v" value="schaak"><span>Schaak</span></label><label><input type="radio" name="ssd-v" value="schulp"><span>Schulp</span></label><label><input type="radio" name="ssd-v" value="pixel"><span>Pixel</span></label><label><input type="radio" name="ssd-v" value="boog"><span>Boog</span></label>
    </fieldset>
    <fieldset class="ssd__set ssd__set--c"><legend class="ssd__lg">Kleur</legend>
      <label><input type="radio" name="ssd-c" value="1" checked><span class="ssd__sw" style="--a:#0a0a0a;--b:#F5480F"></span><b class="ssd__lg">Zwart en oranje</b></label><label><input type="radio" name="ssd-c" value="2"><span class="ssd__sw" style="--a:#1f3b2d;--b:#e9dfc9"></span><b class="ssd__lg">Groen en zand</b></label><label><input type="radio" name="ssd-c" value="3"><span class="ssd__sw" style="--a:#f4f3f1;--b:#1b2a4a"></span><b class="ssd__lg">Beton en marine</b></label>
    </fieldset>
  </div>
  <div class="ssd__pg">
    <div class="ssd__a"><span class="ssd__k">Werkwijze</span><b>In vier stappen naar je nieuwe tuin</b></div>
    <div class="ssd__d" aria-hidden="true">
      <svg class="ssd__v ssd__v--golf" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0 6 C8 0 17 0 25 5 S42 10 50 5 67 0 75 5 92 10 100 4 V10 H0Z"/></svg>
      <svg class="ssd__v ssd__v--tand"><defs><pattern id="ssd-p1" width="20" height="12" patternUnits="userSpaceOnUse"><path d="M0 12 10 0 20 12Z"/></pattern></defs><rect width="100%" height="100%" fill="url(#ssd-p1)"/></svg>
      <svg class="ssd__v ssd__v--schaak"><defs><pattern id="ssd-p2" width="16" height="16" patternUnits="userSpaceOnUse"><rect width="8" height="8" x="8"/><rect width="8" height="8" y="8"/><rect width="16" height="0"/></pattern></defs><rect width="100%" height="16" fill="url(#ssd-p2)"/></svg>
      <svg class="ssd__v ssd__v--schulp"><defs><pattern id="ssd-p3" width="24" height="12" patternUnits="userSpaceOnUse"><path d="M0 12A12 12 0 0 1 24 12Z"/></pattern></defs><rect width="100%" height="100%" fill="url(#ssd-p3)"/></svg>
      <svg class="ssd__v ssd__v--pixel"><defs><pattern id="ssd-p4" width="48" height="16" patternUnits="userSpaceOnUse"><path d="M0 16V12H8V8H16V4H24V0H32V4H40V8H48V16Z"/></pattern></defs><rect width="100%" height="100%" fill="url(#ssd-p4)"/></svg>
      <svg class="ssd__v ssd__v--boog" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0 10 C25 -2 75 -2 100 10Z"/></svg>
    </div>
    <div class="ssd__b"><span>01 Intake</span><span>02 Ontwerp</span><span>03 Aanleg</span><span>04 Nazorg</span></div>
  </div>
</div>
</div>

Meer uit componenten

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →