Code samples and pointers for the final assignment

Samples

• sRGB vs display-P3 kleuren (CodePen)
• HSL vs okLCH kleuren (CodePen)
• sRGB vs okLCH gradients (CodePen)

Oefenen

• Meetypen: sRGB, display-p3, okLCH en meer (CodePen)
• Uitwerking: sRGB, display-p3, okLCH en meer (CodePen)

• Meetypen: mooie gradients (CodePen)
• Uitwerking: mooie gradients (CodePen)

• Meetypen: color-mix() (CodePen)
• Uitwerking: color-mix() (CodePen)

• Meetypen: relative color syntax (CodePen)
• Uitwerking: relative color syntax (CodePen)

Links

• High Definition CSS Color Guide van Adam Argyle (developer.chrome.com)
• Display-P3 colors van Nikita Vasilyev (WebKit)
• LCH: what, why, and how? (van Lea Verou)
• OKLCH Color Picker & Converter van Evil Martians
• hue-interpolation-method (MDN)

• color-mix() van Adam Argyle (developer.chrome.com)
• relative color syntax van Adam Argyle (developer.chrome.com)

Schetsen

Ik maak veel schetsjes - om te ontwerpen - en om techniek uit te vogelen:

Oefenen

• Meetypen: :has() yourself (CodePen)
• Uitwerking: :has() yourself (CodePen)

• Meetypen: :has() als parent selector (CodePen)
• Uitwerking: :has() als parent selector (CodePen)

• Meetypen: :has() als next sibling (CodePen)
• Uitwerking: :has() als next sibling (CodePen)

• Meetypen: :has() met voor en na (CodePen)
• Uitwerking: :has() met voor en na (CodePen)

• Meetypen: :has() met radio buttons (CodePen)
• Uitwerking: :has() met radio buttons (CodePen)

• Meetypen: :has() met checkboxes (CodePen)
• Uitwerking: :has() met checkboxes (CodePen)

• Meetypen: :has() met dropdown (CodePen)
• Uitwerking: :has() met dropdown (CodePen)

• Meetypen: :has() met een form (CodePen)
• Uitwerking: :has() met een form (CodePen)

• Meetypen: :has() en hoeveelheden (CodePen)
• Uitwerking: :has() en hoeveelheden (CodePen)

• Meetypen: :has() en :not() (CodePen)
• Uitwerking: :has() en :not() (CodePen)

• Meetypen: :has() met color schemes (CodePen)
• Uitwerking: :has() met color schemes (CodePen)
• Uitwerking: :has() met color schemes met style queries (CodePen)

Links

• :has() intro van Manuel Matuzović
• :has() Interactive Guide van Ahmad Shadeed
• :has() lijstje met toepassingen van Jhey Tompkins
• :has() specificity van Manuel Matuzović
• :has(:not()) vs. :not(:has()) van Manuel Matuzović

Schetsen

Ik maak veel schetsjes - om te ontwerpen - en om techniek uit te vogelen:

Oefenen

• Meetypen: Modes met :has() (CodePen)
• Uitwerking: Modes met :has() (CodePen)

• Meetypen: Modes met style queries (CodePen)
• Uitwerking: Modes met style queries (CodePen)

• Meetypen: Modes met style queries met named containers (CodePen)
• Uitwerking: Modes met style queries met named containers (CodePen)

• Meetypen: Modes met style queries met and/or (CodePen)
• Uitwerking: Modes met style queries met and/or (CodePen)

• Meetypen: Modes met style queries voor color themes (CodePen)
• Uitwerking: Modes met style queries voor color themes (CodePen)

Links

• Intro container style queries van Manuel Matuzović
• All About CSS Style Queries van Ahmad Shadeed
• CSS Style Query Explainer van Miriam Suzanne

• The Space Toggle Hack voor Modes van Lea Verou (hacky en lelijk)

Schetsen

Ik maak veel schetsjes - om te ontwerpen - en om techniek uit te vogelen:

Oefenen

• Meetypen: Filter basics (CodePen)
• Uitwerking: Filter basics (CodePen)

• Meetypen: Backdrop-filter (CodePen)
• Uitwerking: Backdrop-filter (CodePen)

• Meetypen: Icons verkleuren met filters (CodePen)
• Uitwerking: Icons verkleuren met filters (CodePen)

• Meetypen: Mask basics (CodePen)
• Uitwerking: Mask basics (CodePen)

• Meetypen: Moving masks (CodePen)
• Uitwerking: Moving masks (CodePen)

• Meetypen: Gat met een masks (CodePen)
• Uitwerking: Gat met een masks (CodePen)

• Uitwerking: Radial beams mask (CodePen)

Links

• Filter basics (MDN)
• Icons verkleuren met filters (CSS tricks)
• CSS filter generator to convert from black to target hex color
• HSL color wheel (and more) (Smashing)

• Mask basics (MDN)
• Mask Compositing: The Crash Course (CSS tricks)
• Mask-ing Candy Ghost Buttons (CSS tricks)

• Using @property for CSS Custom Properties (CSS tricks)

Schetsen

Ik maak veel schetsjes - om te ontwerpen - en om techniek uit te vogelen:

Oefenen

• Meetypen: De 6 gradients (CodePen)
• Uitwerking: De 6 gradients (CodePen)

• Uitwerking: Background-position percentages (CodePen)

• Meetypen: Spinning rainbow (CodePen)
• Uitwerking: Spinning rainbow met mask (CodePen)
• Uitwerking: Spinning rainbow met shared background (CodePen)
• Uitwerking: Spinning rainbow met SVG filters (CodePen)

• Meetypen: Gedeeld verloop (CodePen)
• Uitwerking: Gedeeld verloop (CodePen)

Links

• Gradients - The basics (CSS tricks)
• I like how percentage background-position works (CSS Tricks)
• Using multiple backgrounds (MDN)
• Sizing background images with background-size (MDN)
• Lea's pattern gallery (Lea Verou)
• Animating a gradient met Houdini (CSS Houdini)

• Minder bekende properties background-attachment, background-clip en background-origin (MDN)

Schetsen

Ik maak veel schetsjes - om te ontwerpen - en om techniek uit te vogelen:

Oefenen

• Meetypen: SVG filter basics (CodePen)
• Uitwerking: SVG filter basics (CodePen)

• Meetypen: Outlined text (CodePen)
• Uitwerking: Outlined text (CodePen)

• Meetypen: Blobby (CodePen)
• Uitwerking: Blobby (CodePen)

• Meetypen: Squiggly tekst (CodePen)
• Uitwerking: Squiggly tekst (CodePen)

• Uitwerking: Squiggly vormpjes met ogen (CodePen)

Samples

• Noisy buttons (SMIL) - JS trigger 🤨 (CodePen)
• Hightlight one color
• Lava (sinds1971)

Links

• SVG filters - visueel op een rijtje (yoksel)
• SVG Filters 101 (Codrops)
• The Gooey Effect (CSS tricks)
• Outline Text with <feMorphology> (Codrops)
• Creating Texture with <feTurbulence> (Codrops)
• A Guide to SVG Animations (SMIL) (CSS tricks)
• Understanding SVG Coordinate Systems (Sara Soueidan)

• CSS filter: (MDN)
• SVG <filter> (MDN)
• Filter primitive elements (MDN)

Schetsen

Ik maak veel schetsjes - om te ontwerpen - en om techniek uit te vogelen:

Oefenen

• Meetypen: Button states (CodePen)
• Uitwerking: Button states (CodePen)

• Meetypen: Stralenkrans (CodePen)
• Uitwerking: Stralenkrans (CodePen)

• Meetypen: Animatie met index (CodePen)
• Uitwerking: Animatie met index (CodePen)

• Uitwerking: Menuutje (CodePen)

Samples

• Neon buttons (CodePen)
• Emoji fontein met parameters (sinds1971)
• Carrousel met parameters (sinds1971)
• Lava (sinds1971)

Links

• CSS Variables: var(--subtitle); (Lea Verou - video)

• Custom properties: An introduction (Better Programming)
• Using Custom Property “Stacks” to Tame the Cascade (fallbacks) (CSS tricks)
• Ook gewoon handig voor themes (Stuff & Nonsense)
• calc() - the complete guide (CSS tricks)
• Animating a gradient with Houdini (CSS Houdini rocks)
• CSS Specificity Wars - welke selector wint (Stuff & Nonsense)

• Using CSS custom properties - including set/get with JS (MDN)

Schetsen

Ik maak veel schetsjes - om te ontwerpen - en om techniek uit te vogelen:

Oefenen

• Meetypen: Border-radius heeft 8 values (CodePen)
• Uitwerking: Border-radius heeft 8 values (CodePen)

• Meetypen: Hoekjes maken met gradients (CodePen)
• Uitwerking: Hoekjes maken met gradients (CodePen)

• Meetypen: Before en after styling (CodePen)
• Uitwerking: Before en after styling (CodePen)

• Meetypen: Clip-path cookie-cutter (CodePen)
• Uitwerking: Clip-path cookie-cutter (CodePen)

• Meetypen: Vormpjes met ogen (CodePen)
• Uitwerking: Vormpjes met ogen (CodePen)

Samples

• Vormpjes met ogen - alles (CodePen)
• Meer geknutsel met transforms en positioneren (sinds1971)

Links

• The Shapes of CSS (CSS tricks - her-en-der outdated)
• Border-radius heeft 8 values (MDN)
• Fancy Border-Radius (Nils Binder)
• Understanding CSS Multiple Backgrounds (Ahmad Shadeed)
• Gradient angles in CSS (Nils Binder)
• min(), max() en clamp() (op MDN)
• CSS stacking contexts: What they are and how they work (Tiffany B. Brown)
• Understanding Clip Path in CSS (Ahmad Shadeed)
• Clippy - a clip-path polygon() maker (Bennett Feely)
• The SVG `path` Syntax: An Illustrated Guide (CSS tricks)
• SVG path builder (Lea Verou)
• Clip-path scaling (CSS for Designers)

Schetsen

Ik maak veel schetsjes - om te ontwerpen - en om techniek uit te vogelen:

Oefenen

• Startpunt: De 4 transform functies (Codepen)

• Meetypen: 3D basics (CodePen)
• Uitwerking: 3D basics (CodePen)

• Meetypen: Transform sommetjes (CodePen)
• Uitwerking: Transform sommetjes (CodePen)

• Meetypen: Transform minecraft (CodePen)
• Uitwerking: Transform minecraft (CodePen)

Samples

• Backface-visibility flip (CodePen)
• 3D vouwmenu 🌶 (CodePen)
• Flipperdeflip 🌶🌶 (CodePen)

• Perspective-origin bedienen met pijltjes (Pip)
• Meer geknutsel met positioneren en alles samen (sinds1971)

Links

• CSS Transforms - spec (MDN)
• Multiple transforms - Order matters (rip tutorial)
• Things to Watch Out for When Working with CSS 3D (Ana Tudor)
• Backface-visibility (MDN)

Schetsen

Ik maak veel schetsjes - om te ontwerpen - en om techniek uit te vogelen:

Redenen om te animeren (Val Head):

• Relaties tussen elementen leggen. Bijv: een filter dat in- en uitschuift zodat je weet hoe 'de wereld' in elkaar zit en samenhangt.
• Aandacht op iets vestiging. Bijv. nieuwe content na een refresh met een animatie toevoegen aan een pagina, zodat het even het focuspunt wordt.
• Feedback geven. Bijv. een winkelwagentje even groter laten worden als er een product wordt toegevoegd, zodat duidelijk is dat het toevoegen gelukt is en waar het product is terug te vinden.
• Iets uitleggen. Bijv. gebruikers de eerste keer een animatie van een gesture tonen, zodat ze weten hoe de interactie werkt.
• Het merk karakter geven. De branding ook smoel geven met de wijze van animeren.

Oefenen

• Meetypen: Animatie sommetjes (Codepen)
• Uitwerking: Animatie sommetjes (Codepen)

• Meetypen: Happy knife (Codepen)
• Uitwerking: Happy knife (Codepen)

Samples

• Sanne's experimentjes (sinds1971)
• Vormpjes met ogen - alles (CodePen)
• Draaiende regenboog (Codepen)

Links

• 12 Principles of Animation (Disney)
• Designing Meaningful Animation (Val Head - Video)
• CSS Animations - spec (MDN)
• CSS properties that can be animated using CSS Animations or CSS Transitions (MDN)
• Reduced Motion 'In The Wild' (Val Head)
• CSS Easing Animation Tool (Matthew Lein)
• Curved Text Along a Path (CSS Tricks)

Schetsen

Ik maak veel schetsjes - om te ontwerpen - en om techniek uit te vogelen:

Oefenen

• Meetypen: Vierkant met wortel (Codepen)
• Uitwerking: Vierkant met wortel (Codepen)

• Meetypen: Magnification (Codepen)
• Uitwerking: Magnification met cos (Codepen)
• Uitwerking: Magnification met sin en abs (Codepen)

• Meetypen: Zeshoek met sin en cos (Codepen)
• Uitwerking: Zeshoek met sin en cos (Codepen)

• Meetypen: Pythagoras met hypot (Codepen)
• Uitwerking: Pythagoras met hypot (Codepen)

• Meetypen: Output met round en mod (Codepen)
• Uitwerking: Output met round en mod (Codepen)

Links

• Alle Math functions op een rij (MDN)

Schetsen

Ik maak veel schetsjes - om te ontwerpen - en om techniek uit te vogelen:

Oefenen

• Meetypen: Volg die muis - de basics (Codepen)
• Uitwerking: Volg die muis - de basics (Codepen)

• Meetypen: Where's Waldo (Codepen)
• Uitwerking: Where's Waldo (Codepen)

• Meetypen: Color map (Codepen)
• Uitwerking: Color map (Codepen)

• Meetypen: Volg die muisjes (Codepen)
• Uitwerking: Volg die muisjes (Codepen)

• Meetypen: Button bubbles (Codepen)
• Uitwerking: Button bubbles (Codepen)

Links

• mousemove event (MDN)
• Element.getBoundingClientRect() (MDN)
• Using @property for CSS Custom Properties (CSS tricks)

Schetsen

Ik maak veel schetsjes - om te ontwerpen - en om techniek uit te vogelen: