Inhoud

• Inhoud
• Wat zijn filters?
• Filters
• Codepen voorbeeld
• Reflectie

Wat zijn filters?

Filters kan je gebruiken voor het manipuleren van een afbeelding, SVG of iconen. Zo hoef je bijvoorbeeld niet in Figma te gaan om je zwarte iconen, wit te maken, want dit kan je met CSS filters doen.

Filters

Met filters kan je verschillende dingen doen. In de code hieronder zal ik dit verder toelichten.

Basis code

Allereerst hebben we weer een "basis code" van Sanne gebruikt om ons element te centreren:

*, *::after, *::before {
  box-sizing:border-box;
}

body {
	min-height:100dvh;
  margin:0;
  background-color:var(--color-background);
  color:var(--color-main);

	display:grid;
	place-content:center;
}

Codepen voorbeeld

Ik heb via codepen een klein voorbeeldje gemaakt wat je met filters kan doen:

https://codepen.io/rvdegroen/pen/abaNYgM

De code die is gebruikt voor filters met uitleg tekst:

div {
	font-size:4em;
/* 	volgorde telt mee: eerst blur, dan greyscale */
	filter:
		blur(5px)
		grayscale(100%)
/* 	VOOR MN BOOMPJES	*/
		drop-shadow(.2em .2em .25em grey)
/* 	COOL VOOR DARKMODE voor images of whatever	 */
		brightness(0.5)
		;
	transition:1s;

}

/* zwart en wit: grayschale(1) brightness(0) invert(1) op de ACIVE, NORMAL GRAYSCALE(1)  */

/* op brigthness 0, grayscale 1, wordt ie helemaa zwart */

/* sepia filter, iets dat grijs is wordt oranje */
/*  met hue-rotate, hsl css dan draai je alle kleuren op een kleurenwiel > sepia begin bij 20deg*/

/*  met saturate kan je verzadiging toepassen*/

/* css filters, als je hovert filter weg  */
/* als ie te ver geblurred is, zie je niks, dan opeens bij hover wel  */
div:hover {
	filter:blur(0px)
}

/* backdrop-filter:blur(10px);, filter voor alleen de achtergrond  */

/* je kan met :has(:checked), kan je filters toepassen als iets is gechekt. */
/* body:has(:checked) div-nth-of-type(1) { dan kan je iets met het divje doen} */

/* form:has(:checked) ~ div, iets doen met alle zusjes die daarna komen (op dezelfde hoogte), niet erin of eruit, maar ernaast*/

Reflectie

Ik wist voor deze workshop niet wat CSS filters waren, dus vond ik deze workshop heel erg cool en interessant, omdat ik niet wist dat dit mogelijk was binnen CSS. Ik vind dit vooral nuttig om in de toekomst te gebruiken.