Category: CSS

Maak een schaalbare achtergrond met CSS

Het maken van een schaalbare achtergrond is tegenwoordig meer standaard dan uitzondering. Echter, een achtergrond afbeelding kan netjes schaalbaar zijn maar helaas toch uit verhouding. Dit komt omdat de hoogte van de afbeelding in ver… Meer

ScrollMagic

ScrollMagic is een makkelijke manier voor lastige animaties. ScrollMagic is een Javascript library speciaal voor het maken van animaties die getriggerd worden door scrollen.

Via https://ihatetomatoes.net/courses/ kun je hier een v… Meer

Collapsing margin-top

Je kent het wellicht wel: je hebt een container gemaakt met daarin een header. De header heeft een aantal pixels margin-top maar tot je verbazing wordt deze margin-top toegekend aan de container en niet aan de header!

Opdracht

Probeer de dr… Meer

Een print css maken

Het kan nuttig zijn om een apart stylesheet aan te maken voor een pagina die geprint moet worden. Bijvoorbeeld omdat je een kortingsbon wilt weggeven via internet of omdat je je cv printbaar wilt aanleveren aan een toekomstig werkgever. Om … Meer

Child selectoren

inline-block vs float

HTML elementen naast elkaar plaatsen kan op verschillende manieren. In deze korte tut wil ik float en inline-block bespreken. Optisch gezien is er weinig verschil tussen beiden. In beide gevallen komen de elementen naast elkaar te staan… Meer

Formulieren stijlen

Formulieren stylen

In combinatie met tabellen of div’s kun je je formulier mooi opmaken. Dit doe je zodat je formulier in stijl met je website blijft maar dit doe je ook om het je gebruiker makkelijker te maken. Je kunt namelijk bij het opmaken van je formu… Meer

Werken in percentages

Er zijn tegenwoordig meer mobiele telefoon met internet verbinding dan computers. Nog even en er zullen ook meer page views zijn vanaf een mobiele telefoon dan vanaf een gewone computer. Tijd dus om te leren hoe je je site voor mobiel geschi… Meer

Child selectoren

Over child en sibling selectoren

Een descendent selector is een selector waarmee je aangeeft wat er moet gebeuren wanneer een bepaalde tag (of id / class) binnen een andere tag (of id / class) zit. Door descendent selectoren te gebruiken hou je de ruimte om elementen te stij… Meer

Mediaqueries

Mediaqueries

Een mediaquery stelt je in staat om binnen je stylesheet stijlen aan te geven die gelden onder een bepaalde voorwaarde. Dit kan zijn schermbreedte, scherm orientatie (portrait of landscape). Een mediaquery is een stukje code ter uitbere… Meer

Boxmodel

Zoals je inmiddels weet kun je met behulp van een div element een lege box maken in HTML welke je vervolgens “vult” met afbeeldingen, tekst, video etc om zo je ontwerp op te zetten. Meestal maak je div’s in div’s om e… Meer

Float

Om elementen in je HTML pagina naast elkaar te positioneren kun je de eigenschap float gebruiken. In aansluiting hier op kun je het een en ander lezen over wireframes (je beeldscherm indeling).

Video’tje kijken?

POLS

Mp>Op POLS … Meer

Webfonts

Webfonts zijn fonts omgezet voor het internet. Nog niet heel lang geleden was je als ontwerper beperkt tot fonts als Verdana of Arial voor je ontwerp. Tegenwoordig kun je met behulp van CSS aparte fonts op je site gebruiken. De meest gangbar… Meer