Inhoud

• Inhoud
• Over deze workshop
• Coole voorbeelden
• Reflectie

Over deze workshop

In deze workshop hebben wij het gehad over verschillende gradients. In totaal zijn er 6, maar er zijn 3 belangrijke, waar ik het over ga hebben en waar wij ht over hebben gehad.

Basis code

De basis code die wij steeds hebben gebruikt is als volgt (voor het positioneren van een kubus in het midden van de pagina):

/* CSS */

body {
	min-height:100dvh;
	margin:0;

	display:grid;
	place-content:center;
}

div {
	width:80vmin;
	aspect-ratio:1;

	background-color:silver;

Voor elke gradient hebben wij de basis code bovenaan de CSS staan. Dit vormt de basis voor de rest.

Linear gradient

Bij een linear gradient kan je de volgende dingen doen:

• Maken van een gradient
• Twee kleuren strak op elkaar laten staan
• Strak op elkaar overlopen qua kleur

Radial gradient

Bij een radial gradient kan je de volgende dingen doen:

• Boogjes maken
• Radial gradients maken
• Cirkels maken

Voorbeeld van een radial gradient:

/* CSS */

element {
  background-image:
  radial-gradient(
    /* eerst eitje, als je zegt circle, dan wordt ie circle */
    cirle,
    cirle at 25% 25%,
    deeppink 50%,
    dodgerblue 0)
    }
    /* voor schaakbord */
    background-size: 2em 2em;

Conic gradient

Met een conic gradient kan je de volgende dingen doen:

• Schaakbord pattern maken
• Driekhoekjes maken met gradients

Dee lijntjes kunnen soms niet worden ge-anti-aliased. Dit kan je oplossen om de lijntjes iets blurry te maken met calc.

Voorbeeld voor een conic gradient:

Element {
background-image:
/_ in het midden _/
at 25% 25%,
/_ from is interessant standaard 0 deg, of vanaf 30 deg beginnen_/
from 30deg at 25% 6em,
/_ ruitjes _/
from 45deg at 50% 50%,
deeppink 25%,
dodgerblue 0 50%,
deeppink 0 75%,
dodgerblue 0
}
/* voor schaakboord */
background-size: 2em 2em;

Coole voorbeelden

Tijdens deze workshop heeft Sanne coole voorbeelden gemaakt:

1. Cool pattern: https://codepen.io/shooft/pen/oNPxEGp?editors=1100
2. Dag - nach hover: https://codepen.io/shooft/pen/vYzGpwe

Reflectie

Ik vond de workshop over de gradients interessant en ik heb nieuwe dingen gezien, waarvan ik niet eens wist dat dit kon met gradients.