Voordat we aan de 'spelen met CSS' week begonnen moest iedereen eerst een kunstwerk uitkiezen die we zouden willen gaan namaken met CSS. Dit kunstwerk kon vanalles zijn. Ik heb zelf een poster van mijn favoriete band, Khruangbin, uitgezocht. Het is een poster die gemaakt is door Michelle Urra voor een van Khruangbin's live concerten. Bekijk hier de poster: Khruangbin poster van Michelle Urra.

De lessen van Sanne en Sundous waren erg leuk en leerzaam, we gingen bijvoorbeeld een pinguin animatie die Sanne had gemaakt proberen na te maken. Dit deden we in Codepen: pinguin animatie.

Ik heb tijdens deze CSS week deze webpagina gemaakt met html en CSS: CSS week project. Na afloop heb ik mijn werk gepresenteerd aan de klas en mocht iedereen 3 stemmen uitbrengen. Mijn project kreeg 8 stemmen, en ik won de juryprijs. Na afloop van deze week was ik zo geïnspireerd en gemotiveerd om meer te oefenen met CSS dat ik nog een project heb gemaakt: r20222 television.

Dankzij de lessen in deze week heb ik een aantal nieuwe dingen geleerd over CSS. Ik zal ze hieronder uitleggen:

• aspect-ratio:

Deze CSS property, aspect-ratio, is heel handig als je bijvoorbeeld snel de grootte en breedte van een object wil vaststellen. Je kan bijvoorbeeld typen: aspect-ratio: 1/1; Dit betekend dat het object even hoog als breed zal worden weergegeven. Je hoeft daarom ook alleen maar de breedte of de hoogte van het object mee te geven als je ook aspect-ratio gebruikt.

• inherit:

Deze CSS waarde betekent dat een waarde wordt overgenomen van een parent element. Dus als bijvoorbeeld een article element de CSS property en value 'color: blue;' heeft, en een kind element de CSS property en value 'color: inherit;' heeft, dan neemt het kind element de waarde 'blue' van het ouder element over.

• filter:

Met de filter property in CSS kan je een filter zetten over een element. Er zijn heel veel verschillende soorten filters. In het project dat ik gemaakt het tijdens deze week heb ik een filter gebruikt om te te gebruiken bij het animeren van het verbranden van de raket in de zon. Ik had gemaakt dat wanneer je op de raket klikt, deze naar de zon vliegt, verbrand en verdwijnt. Het verbranden kon met de 'filter:brightness(0);' worden gemaakt. Door deze filter met waarde 0 wordt de raket helemaal zwart, alsof die helemaal verbrand.


• calc():

De calc() waarde in CSS is superhandig. Deze waarde kan dingen berekenen. Als je bijvoorbeeld even element precies in het midden wil plaatsen en dit element een breedte heeft van 4rem, dan kan je dat op de volgende manier doen, je geeft het de 'position: relative;' en 'right: calc(50% - 2rem)'. Je trekt er 2 rem vanaf omdat dat de helft is van de totale breedte. Hierdoor komt het element precies in het midden te staan.

• box-shadow: inset;

De 'box-shadow: inset;' property en value geven een inwaardse schaduw. Dus in plaats van dat de schaduw buiten het element word weergegeven, zie je die in het element.

• radial-gradient: (circle at 25% 25%, blue, black);

Met radial gradients kan je hele coole dingen maken in CSS. Met de bovenstaande value 'circle at 25% 25%' kan je zelfs aangeven waar je precies wilt dat de cirkel weergegeven gaat worden.

Een aantal handige links:

• Fancy border radius
• Clippy