Direct naar de inhoud Direct naar de inhoud

Handboek HTML5 en CSS3HTML en CSS van <a> tot z-index

Maak zelf een HSL-kleurkiezer (1)

Er bestaan allerlei hulpmiddelen om de CSS-code van een RGB- of HSL-kleur te bepalen, maar zelf iets bouwen is een perfect oefenproject. In een serie korte artikelen lees je hoe je zelf een kleurkiezer voor HSL maakt met HTML, CSS en een beetje JavaScript. Dit is deel 1: de interface (UI).

Een werkende versie van het eindproduct, de HSL-kleurkiezer.

De kleurkiezer is gebaseerd op het HSL-kleurmodel en biedt daarom instelmogelijkheden voor hue (tint), saturation (verzadiging) en lightness (helderheid). Er is een vak waarin de gekozen kleur wordt getoond en er is een vak voor de CSS-kleurdeclaratie. De knop Kopieer zet de code op het klembord zodat je die in de CSS kunt plakken en de knop Herstel zet alles terug naar de beginwaarden. De helpknop rechtsboven opent een overlay met instructies.

Het ontwerp bestaat uit drie hoofdcomponenten:

  • een header met de titel en de helpknop;
  • de schuifregelaars en het kleurvlak;
  • de controls: het codevak en de knoppen.

De overlay met de helptekst bekijken we later apart.

In HTML ziet de hoofdstructuur er zo uit:

<form>
  <header>
    <h1>HSL-kleurkiezer</h1>
    <button class="help" id="btn-help" title="Help">?</button>
  </header>
  <main>
    <input type="range" min="0" max="360" class="slider color" id="color-slider">
    <input type="range" min="0" max="100" class="slider" id="saturat-slider">
    <input type="range" min="0" max="100" class="slider" id="light-slider">
    <div class="color-field" id="color-field"></div>
    <div class="controls">
      <input type="text" readonly id="color-value">
      <button class="controls-btn" id="btn-copy-color-value">Kopieer</button>
      <button type="reset" id="btn-reset">Herstel</button>
    </div>
  </main>
</form>

De basisopmaak

We beginnen met wat algemene CSS. De box-sizing wordt voor alle elementen border-box, het lettertype wordt Segoe UI en de marges van body, h1 en h2 worden 0.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  font-family: "Segoe UI", sans-serif;
  margin: 0;
}
h1, h2 {
  margin: 0;
}

Op een mobiele telefoon mag de kleurkiezer de hele vensterbreedte gebruiken, maar op een groter scherm mag de interface niet breder worden dan 500px. Een form heeft standaard display: block en wordt daarom vanzelf zo breed als kan. We hoeven daarom alleen de breedte te beperken:

form {
  max-width: 500px;
}

De header

Het eerste onderdeel in het formulier is de header. Daarin staan de kop en de helpknop. Die moeten beide tegen de buitenkant worden uitgelijnd. Dat gaat eenvoudig en snel met flexbox en de eigenschap justify-content: space-between:

header {
  display: flex;
  justify-content: space-between;
}

Flexbox plaatst standaard items in de rijrichting. Daarom komen de kop en knop naast elkaar. Alleen het vraagteken in de helpknop moet nog naar het midden en dat doet de flexeigenschap:

.help {
  align-self: center;
}

De sliders en vakken

De schuifregelaars en het kleurvak staan in main. Daar staat ook een div in met de klasse .controls en die bevat het tekstvak en de knoppen.

main {
  display: flex;
  flex-flow: column;
}

Met deze CSS worden de flexitems in main onder elkaar gezet (flex-flow: column). Omdat in de kruisrichting items standaard worden uitgerekt (align-items: stretch) worden die items net zo breed als main. En main is net zo breed als form en dat is de vensterbreedte of maximaal 500px.

De controls

De div met daarin het tekstvak en de knoppen is ook een flexcontainer:

.controls {
  display: flex;
  flex-flow: wrap;
  margin: 2px 0;
}

De items worden in de regelrichting geplaatst (row is de standaard), maar als ze niet naast elkaar passen, mogen ze naar de volgende regel (wrap). Zo kunnen de onderdelen een redelijke grootte houden en toch in een smartphonevenster passen.

Flexitems kunnen standaard wel krimpen maar niet groeien. De volgende CSS zorgt ervoor dat alle items in .controls volledig flexibel worden.

.controls > * {
  flex: 1 1 auto;
}

Je kunt dit uitproberen door de ontwikkelaarshulpmiddelen te openen en de responsive-designmodus te activeren (Ctrl+Shift+M).

Het resultaat tot nu toe.

Volgende aflevering

De hoofdstructuur van de app is klaar. Het kleurvak is nog wel onzichtbaar. Dat is namelijk nog een lege div, omdat de CSS daarvoor nog niet is geschreven. De onderdelen zullen altijd op de goede plek staan, welk formaat het venster ook heeft.

In deel 2 maken we de schuifregelaars voor de tint, de helderheid en de verzadiging, het kleurvak en controls: het tekstvak en de beide knoppen. Vooral voor de schuifregelaars (<input type="range">) zijn nog heel wat regels CSS nodig. Deze HTML5-elementen krijgen veel eigenschappen van de browser die voor de kleurkiezer in de weg zitten. Bovendien zijn die verschillend voor Chrome en Firefox.

Tags:


Reageer op dit artikel

* Vul a.u.b. alle velden in.