Tagarchief: CSS

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.

Lees verder Het boxmodel van CSS

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.

Het mooie is dat de basis van de schakelaar gewoon in je HTML-gereedschapskist zit: het element <input type="checkbox">. Het principe is dat je de in- en uitgeschakelde toestand van dit selectievakje gebruikt om de opmaak van de zelfgebouwde schakelaar te veranderen en om JavaScript-code te activeren. Het selectievakje zelf maak je onzichtbaar.

Het is een eenvoudig project en toch maak je kennis met een berg CSS-mogelijkheden. Op CodePen staat het resultaat en daarmee kun je vrijuit experimenteren.

See the Pen schakelaar by Peter Doolaard (@dool) on CodePen.dark

Lees verder Maak een schakelaar met CSS en HTML

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.

Lees verder Specificiteit in CSS, zo werkt het

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.

Voor een goed begrip van dit artikel is het handig als je weet wat specificiteit is. Kan je kennis een opfrisser gebruiken, lees dan ook het artikel Specificiteit in CSS, zo werkt het.

De pseudoklassen in het kort

Behalve :has() worden alle nieuwe pseudoklassen ondersteund door de belangrijke browser.

Tussen de haakjes van :is() en :where() zet je een lijst van selectors. Elke selector die overeenkomt met een element wordt opgemaakt. Alle soorten selectors en combinators zijn toegestaan. Foute selectors worden genegeerd, maar maken niet de complete selector ongeldig. Bij :is() is de specificiteit gelijk aan de selector met de hoogste specificiteit. Bij :where() is de specificiteit altijd 0.

Ook :not() krijgt een selectorlijst. Elementen die overeenkomen met een selector in de lijst worden juist niet opgemaakt. De specificiteit is gelijk aan de selector met de hoogste specificiteit.

:has() werkt als een ‘parent selector’. De selectorlijst is een voorwaarde, geen opmaakdoel. Het is erg onzeker of :has() daadwerkelijk wordt toegevoegd aan de specificatie.

:focus-within maakt het mogelijk om een voorouder op te maken van een element dat de focus kan krijgen.

:focus-visible laat de browser bepalen of het nodig is om de focusopmaak te tonen. Wel bij toetsenbordnavigatie, niet bij muisgebruik.

Lees verder Leer werken met nieuwe pseudoklassen van CSS

Toveren met CSS Grid Layout

CSS is de opmaaktaal voor websites en -apps. Met de bundel van drie boeken uit de Web Development Library over die onderwerp leer je alle mogelijkheden, waardoor je veel betere websites ontwerpt. In het boek CSS 3 van Doolaard en Kassenaar leer je werken met CSS-selectors, maateenheden, het box-model, kleurmodellen en meer. De vele oefeningen maken het tot een perfect (zelf-)studieboek. Ben je de basis voorbij? In CSS Flexbox & Grid Layout helpt Peter Doolaard je met het maken van lay-outs voor webpagina’s met Flexible Box Layout en CSS Grid Layout. Deze technieken zijn bedoeld om op een intuïtieve manier complete webpagina’s, apps en onderdelen van de gebruikersinterface in te delen. Met het boek Bootstrap 4 van Peter Kassenaar kunnen niet-designers hun websites snel op consistente en eenvoudige manier opmaken, terwijl ‘echte’ designers hun hart kunnen ophalen aan de vele mogelijkheden die het framework biedt om het naar eigen wens in te stellen. Vergroot je CSS-expertise en bestel deze drie boeken samen voor een voordelige prijs. Hieronder vind je een voorbeeld over het werken met CSS: Toveren met CSS Grid layout van de hand van Peter Doolaard.(H.F.)

Toveren met CSS Grid layout

Hoe bouw je met dezelfde HTML-codebasis een website met vier gezichten? Je leest het in dit artikel waarin we de website rollingstone.com namaken. De lay-out van deze website varieert van één tot vier kolommen waarbij de inhoud steeds net even anders wordt gepresenteerd. CSS Grid Layout en de nieuwe optie subgrid zorgen voor de magie.

Lees verder Toveren met CSS Grid Layout

Dirkjan van Ittersum: ‘Men haalt lang niet alles uit WordPress wat er inzit!’

Dirkjan van Ittersum – de auteur van ‘WordPress-thema’s bouwen’ en ‘Een webwinkel met WordPress’ – werkt sinds 1997 als journalist voor radio, internet en allerlei magazines. Als hoofdredacteur was hij verantwoordelijk voor het telecomvakblad Connexie. Ook schreef hij honderden artikelen voor ICT-uitgaven als PC-Active, PCM, Computer Idee, Digitaalgids van de Consumentenbond, InCT en nog vele andere. Op BNR Nieuwsradio is hij regelmatig te horen als nieuwslezer. Ankeiler Media is zijn bedrijf en hij levert van daaruit tekst, audio en video voor print, web en radio. Veelal dus over ICT, telecom en nieuwe media. En over WordPress, waarover hij voor Van Duuren Media in totaal drie boeken schreef. Computercreatief sprak met Dirkjan over zijn boeken, over het optimaliseren van een WordPress-site en over de kennis die je nodig hebt voor het zelf maken van thema’s en het opzetten van een webwinkel.
De twee boeken van Dirkjan van Ittersum worden tot 1 augustus 2016 door de uitgever voor een speciale bundelprijs aangeboden: van €48,90 voor €29,95!  De bestelpagina vind je HIER.
Lees verder Dirkjan van Ittersum: ‘Men haalt lang niet alles uit WordPress wat er inzit!’

‘WordPress-thema’s bouwen’ en ‘Een webwinkel met WordPress’

‘WordPress-thema’s bouwen’ en ‘Een webwinkel met WordPress’

Elke maand besteden we speciale aandacht aan een boek uit het fonds van Van Duuren Media. Deze maand gaat het om twee boeken rond het thema WordPress. De boeken van de maand februari zijn twee boeken uit de CMS Development Library: WordPress-thema’s bouwen en Een webwinkel met WordPress van auteur Dirkjan van Ittersum. Op het blog zullen wat voorproefjes uit de boeken verschijnen en er komt een interview met de auteur over de boeken, over het opzetten van een webwinkel, het zelf maken van WordPress-thema’s en over de krachtige mogelijkheden van WordPress.

Deze twee boeken worden tot 1 augustus 2016 door de uitgever voor een speciale bundelprijs aangeboden: van €48,90 voor €29,95!  De bestelpagina vind je HIER.

Het boek CMS Development Library: WordPress-thema’s bouwen behandelt het zelf ontwerpen en maken van een WordPress-thema.  Een WordPress-thema bevat de vormgeving van een WordPress-site en de technische uitvoering daarvan middels HTML, CSS en PHP. Dirkjan van Ittersum loodst je in het boek door alle valkuilen en problemen met het maken van een thema heen.

Dat je met behulp van WordPress ook een webwinkel kan opzetten weten niet veel mensen. In het boek CMS Development Library: Een webwinkel met WordPress legt een prima basis voor je e-commercesite. Met de juiste plug-ins ben je snel klaar voor de verkoop van zowel fysieke als digitale producten. Dit boek toont stap voor stap hoe de plug-in WooCommerce je WordPress-site omvormt tot een geavanceerde webwinkel. Inclusief uitleg over het accepteren van iDEAL-betalingen.