Vormen maken met CSS, hoe doe je dit? Onze trainer Christian legt het aan je uit!

Vormen maken met CSS

Wanneer we vormen in HTML willen plaatsen wordt er vaak gedacht aan een afbeelding. Wellicht een valide keuze, afhankelijk van de complexiteit van de vorm, maar er zijn andere mogelijkheden. Vaak kun je gebruik maken van Canvas, Scalable vector graphics (SVG) of zelfs CSS.

Canvas en SVG

Met canvas kun tekenen; vormen, tekst, afbeeldingen, enz. Maar de echte kracht ligt bij de animaties die je kunt maken. Kijk bijvoorbeeld maar eens naar de Workshop Canvas die we een tijd geleden op de website hebben geplaatst. Tegenwoordig is het canvas zelfs geschikt om 3D graphics te gebruiken. Mocht je dat interessant vinden kun je ook eens kijken naar deze sessie over WebGL die ik verzorgd heb op de Microsoft TechDays. Super krachtig dus, maar voor bijvoorbeeld een eenvoudige vorm als een cirkel, is het waarschijnlijk wat overdreven.

Scalable Vector Graphics (SVG) is daar bijvoorbeeld weer een stuk geschikter voor. Het onderstaande stukje SVG levert een mooie cirkel

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Het voordeel van SVG is dat het (de naam zegt het al), schaalbaar is en dus niet lelijk wordt als je het groter of kleiner maakt. Tevens is het weinig data, en is het direct onderdeel van je HTML en er hoeft dus niet een extra request naar de server gestuurd te worden om bijvoorbeeld een afbeelding op te halen. Overigens kun je ook prima complexere tekeningen gebruiken. Designtools zoals Adobe illustrator kun je gebruiken om een graphic te exporteren als SVG.

CSS

Wanneer de vorm echter eenvoudig genoeg is, kun je ook CSS gebruiken. Een vierkant is eenvoudig, door bijvoorbeeld een DIV element een kleur te geven.
Maar gebruik je bijvoorbeeld een "Border Radius", dan kun je dezelfde DIV veranderen in een cirkel. Probeer hieronder maar eens wat er gebeurt als je met de schuifjes de waardes voor de afmetingen van de DIV, de dikte van de border, of de border-radius aanpast.
100px
0%
2px




Zet je de "width + height" op 0, de border width op 150, en vervolgens zet je de kleur van de verschillende zijdes op transparent. Verschillende driehoekjes zijn het gevolg. Uiteraard kun je de vorm van de driehoekjes aanpassen door de dikte van de afzonderlijke zijdes te laten verschillen.
Door het combineren van verschillende divjes kun je vervolgens weer complexere vormen creŽren. Een aantal mooie voorbeelden van afbeeldingen die compleet met CSS gemaakt zij kun je vinden op deze website

De voordelen van CSS vormen zijn eigenlijk vergelijkbaar met die van SVG. Namelijk de schaalbaarheid, het niet vereisen van een extra request naar de server, manipuleerbaar vanuit JavaScript en CSS-selectors (zoals een :hover selector).

Trainingen

Master it biedt diverse trainingen aan voor HTML, JavaScript en CSS. Kijk bijvoorbeeld eens naar de training Programming in HTML5 with JavaScript and CSS3 of naar een van onze andere trainingen