Layoutaanpassingen met behulp van CSS-variabelen

In het item Variabelen in CSS wordt uit de doeken gedaan wat CSS-variabelen zijn en wat je er mee kunt. Op deze pagina wordt een voorbeeld getoond van het gebruik ervan.

Deze code is overgenomen uit Webdesigner Magazine 93 (februari 2017), pag. 60 en volgende.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.

Het voorbeeld zelf is gemaakt door Adam Onishi, een webdeveloper uit Londen die later fotograaf is geworden.

Het voorbeeld wordt getoond om de mogelijkheden te tonen, verder niet. De code is niet beschikbaar als download. Er wordt geen ondersteuning voor gegeven.

In het voorbeeld zie je een rode en een paarse balk. Daarvan kun je dynamisch de kleur veranderen. Klik op een van de kleuren die in het grijze vak staan. Je kunt de tint, verzadiging en helderheid veranderen. Klik op het vink-teken om de wijziging door te voeren. Zie ook het item Kleurcodes voor tekst, links en achtergrond.

De kleurenkiezer is gemaakt met <input type="color">.

Als de helderheid van de (bovenste) balk relatief hoog is, is de tekstkleur zwart. Als de helderheid relatief laag is verandert de tekstkleur in wit. Dat is gedaan om de leesbaarheid goed te houden. Zie ook het item Tekstkleur kiezen op basis van de achtergrondkleur. In het voorbeeld wordt het YIQ-algoritme gebruikt.

De wijzigingen aan de CSS-variabelen worden gedaan door JavaScript.

Opmerking:
 
Een algemeen verhaal over CSS-variabelen vind je in het item Variabelen in CSS.
 
Een veel uitgebreider voorbeeld staat in het item Layoutaanpassingen met behulp van CSS-variabelen II.