Direct naar de inhoud Direct naar de inhoud

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

Nieuws en tips

  • Geen toetsenbordfocus in Firefox op macOS

    Firefox op macOS laat je niet zomaar met de Tab-toets door links bladeren. Dat is lastig als je focusopmaak van je navigatie wilt testen. Het goede nieuws is dat je het eenvoudig kunt oplossen.

  • Het boxmodel van CSS

    Alles wat je op een webpagina ziet is een box. Het boxmodel van CSS regelt de opbouw van boxen en de interactie tussen boxen. Weten hoe het boxmodel werk is onmisbare CSS-basiskennis.

  • Specificiteit in CSS, zo werkt het

    Specificiteit in CSS is een belangrijke oorzaak van selectors die niet doen wat jij wilt. Specificiteit gaat over hoe zwaar een selector telt en of een concurrerende selector sterk genoeg is om hem te overschrijven. De oplossing begint met begrijpen hoe specificiteit werkt. Een goede tweede is: houd de specificiteit van je selectors zo laag als kan en zo hoog als nodig is.

  • Leer werken met nieuwe pseudoklassen van CSS

    Het assortiment selectors van CSS is uitgebreid. Leer werken met de nieuwe pseudoklassen :is(), :where() en :not(), maak kennis met :has() en controleer je focus met :focus-within en :focus-visible.

  • Maak een schakelaar met CSS en HTML

    Maak een schakelaar met CSS en HTML die er niet alleen als een schakelaar uitzien, maar die ook daadwerkelijk iets doet. Zo’n aan-uitschakelaar (toggle of switch) gebruik je bijvoorbeeld om je webformulier op te fruiten. Of je laat bezoekers van de website kiezen tussen een licht en een donker thema. Met een klein beetje JavaScript maak je een werkende themawisselaar van je schakelaar.

  • Stop misbruik van je contactformulier [update]

    Stop spam via je contactformulier met een kleine aanpassing van je HTML-formulier en twee eenvoudige tests in je PHP-mailscript.

  • Maak zelf een HSL-kleurkiezer (4)

    Na drie afleveringen doet de kleurkiezer wat die moet doen: een kleur instellen en de CSS-code daarvan kopiëren en plakken in je editor. Een ding ontbreekt nog: de helpfunctie. In deze aflevering leer je hoe je een overlay en een dialoogvenster maakt met HTML, CSS en Javascript.

  • Maak zelf een HSL-kleurkiezer (3)

    In deze derde aflevering draait het vooral om de JavaScript-code waarmee de schuifregelaars daadwerkelijk iets gaan doen. We maken verwijzingen naar elementen, luisteren naar veranderingen en reageren daarop door onderdelen van de interface aan te passen. Aan het eind van deze aflevering hebben we een werkende kleurkiezer.

  • Maak zelf een HSL-kleurkiezer (2)

    Deel 2 van deze serie gaat over de opmaak van de regelaars voor de componenten van een HSL-kleur. Een schuifregelaar is een complex element. Om bij alle onderdelen te kunnen komen, moeten we naar The Upside Down van het DOM: het schaduw-DOM.

  • 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).

Pagina 1 van 2 >