Direct naar de inhoud Direct naar de inhoud

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

Maak zelf een HSL-kleurkiezer (2)

In deel 1 van deze serie is het raamwerk van de HSL-kleurkiezer gebouwd. Dit deel gaat over het maken van de regelaars voor de componenten van een HSL-kleur. Dat blijkt nog een mooie uitdaging.

De kleurwaarden

Eerst moeten we bedenken hoe we alle kleuren kunnen weergeven. Een HSL-kleur bestaat uit drie componenten: hue (tint), saturation (verzadiging) en lightness (helderheid). HSL is gebaseerd op de RGB-kleuren. Het model ziet eruit als een dubbele kegel, met de kleuren in een cirkel en zwart en wit op de toppen. Rood staat op 0/360 graden, groen op 120 en blauw op 240 graden. In CSS wordt bijvoorbeeld de volle kleur groen weergegeven als hsl(120, 100%, 50%). Hierbij is 120 de tint, 100% de verzadiging en 50% de helderheid. Met de hoofdkleuren van RGB maken we een kleurverloop waarin alle tinten voorkomen. CSS heeft daarvoor de eigenschap linear-gradient.

Het regelsysteem

Nu moeten we het regelsysteem bouwen om de drie waarden van HSL onafhankelijk van elkaar te kunnen instellen. In deel 1 hebben we al gezien dat de HTML-schuifregelaar (of slider) <input type="range"> perfect is voor deze klus. De attributen min en max bepalen het bereik van de regelaars. Het attribuut value bevat de waarde. Die kunnen we ophalen en gebruiken met JavaScript. Dat komt later.

Eerst de kleur. Daarvoor maken we een regelaar met een bereik van 0 tot 360 (graden).

<input type="range" min="0" max="360" class="color">

In CSS maken we de klasse .color. Daarin wordt een lineair kleurverloop gemaakt van links naar rechts met elke RGB-hoofdtint als kleurstop in de korte hexadecimale notatie:

.color {
  background-image: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

Met alleen deze code zul je het kleurverloop niet zien. We moeten ook de in de browser ingebouwde opmaak van de regelaar aanpassen. De belangrijkste regel in de CSS hieronder is -webkit-appearance: none. Daarmee wordt (ook in Firefox en Edge) de standaardopmaak van een schuifregelaar uitgeschakeld. Pas dan kun je er bijvoorbeeld een achtergrond op toepassen. De rest is minder spectaculair. We schakelen een eventuele rand uit, stellen een outline in, maken de regelaar hoger en stellen een marge boven en onder in.

input[type="range"] {
  -webkit-appearance: none;
  border: none;
  outline: 1px solid black;
  height: 50px;
  margin: 6px 0;
}

We hebben nu een balk met alle tinten, maar het schuifje is te klein en niet mooi. Om dat te kunnen opmaken moeten we naar The Upside Down van de pagina: het schaduw-DOM.

Opmaak in het schaduw-DOM

Schuifregelaars (en ook elementen zoals video en audio) zijn veel complexer dan een p of een div. Ze ‘doen’ iets en bestaan uit verschillende (verborgen) onderdelen die in de diverse browsers niet per se dezelfde naam hebben. Om bij die onderdelen te kunnen komen, moeten we naar een parallelle wereld de bekendstaat als het schaduw-DOM (shadow DOM).

  • In Chrome open je de doorgang door bij de instellingen van de DevTools Show user agent DOM in te schakelen.
  • In Firefox typ je in de adresbalk about:config. Zet vervolgens de instelling devtools.inspector.showUserAgentShadowRoots op true.

In Chrome ziet het DOM van het element input er zo uit:

<input type="range">
#shadow-root (user-agent)
  <div>
    <div pseudo="-webkit-slider-runnable-track" id="track">
      <div id="thumb"></div>
    </div>
  </div>

De browser bevat eigen opmaakstijlen voor het schuifje (thumb) en het spoor waarover je het schuifje sleept (track). Het zijn pseudo-elementen en in Chrome heten ze ::-webkit-slider-runnable-track en ::-webkit-slider-thumb. Dit kun je vinden door de stijlregels van die onderdelen te bekijken op het tabblad Styles van de DevTools.

We maken de track even hoog als de container:

input[type="range"]::-webkit-slider-runnable-track {
  height: 100%;
}

Ook bij schuifje moet de standaardopmaak worden uitgeschakeld met -webkit-appearance: none;. De box-shadow zorgt ervoor dat het schuifje ook in donkere gebieden goed is te zien.

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-shadow: 0 0 4px 1px white;
  cursor: pointer;
  height: 100%;
  outline: 2px solid black;
  width: 20px;
}
Het resultaat tot nu toe. Het is alleen opmaak. De functionaliteit wordt in de volgende aflevering toegevoegd.

Met deze toevoegingen is de regelaar voor de tint klaar. Ook de regelaars voor verzadiging en helderheid hebben nu de basisopmaak. In de broncode vind je ook de stijlregels voor de pseudo-elementen in Firefox. Die komen op hetzelfde neer als die voor Chrome, maar hebben het voorvoegsel ::-moz-range-.

In deel 3 gaan we verder met de opmaak en maken we een begin met het programmeren van de logica (JavaScript).

Tags:


Reageer op dit artikel

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