Kennismakings­oefening

Een lijstje links om je experiment te starten:

• Na lang wachten zijn container queries er dan echt. Joehoe.
• Stephanie Eckles geeft meer uitleg en voorbeelden.
• Met container query units kun je maten bebruiken obv de grootte van de container.
• Manuel Matuzović legt uit hoe em in container queries uitpakt.

Mochten container queries niet genoeg zijn:

• Andere media features dan width en height, bijv. prefers-color-scheme (dark by default?) of prefers-reduced-motion. En er is zo veel meer!.
• Andere media type dan screen, bijv. print. Helemaal leuk i.c.m. princexml.
• Toegankelijkheid. Kijk bijv. in a11y checklist waar CSS kan bijdragen aan een betere toegankelijkheid.
• De mogelijkheden van writing-mode → Jen Simmons over writing modes.

• uitdaging: Ahmad Shadeed geeft een intro over CSS Style Queries (achter een vlag🚩 in Chrome).

Een lijstje links om je experiment te starten:

• Kleuren met spaties i.p.v. comma's → nu optioneel, in de toekomst noodzakelijk.
• A Guide To Modern CSS Colors
• Lekkere felle kleuren → display-P3
• Lekkere felle kleuren (en meer) → lch
• Color functions:
  • relative color syntax (achter een vlag🚩 in Safari).
  • color-mix() (achter een vlag🚩 in Safari en FireFox).
  • color-contrast() (achter een vlag🚩 in Safari en FireFox).

• accent-color → kleuren van form controls
• color-scheme → default dark en light mode
• font-palette → fontts met meer klereun (uitgebreidere uitleg)

• (Mulitple) gradients (linear, radial, conic en repeating) → de basics van conic gradients, alle basics, Lea's gallery en Temani Afif's gallery.
• Veelkleurige achtergronden met custom properties.
• Blend-mode → de basics en ze zijn te chainen.
• CSS-filters → de basics en ze zijn te chainen.

• Uitdaging: Gradients animeren met Houdini.

Een lijstje links om je experiment te starten:

• Transform functions chainen → de volgorde doet er toe.
• Individual transform properties → de volgorde doet er toe.
• 3D Transforms:
  • perspective basics by Chris Coyer en
  • meer advanced 3D by Ana Tudor.
• Animeren → basic samples op sinds1971.nl.
• Animeren met negatieve delays en meer css animation tricks.
• Motion-path → Get Moving by dan Wilson.
• bram.us legt dat grids ook te animeren zijn.

• Uitdaging: Scroll-based animaties met @scroll-timeline → supertof (helaas nog wel achter een vlag 🚩).
• Uitdaging: Gradients animeren met Houdini.
• Uitdaging: 3D animeren.

Een lijstje links om je experiment te starten:

• Grid named areas en named lines.
• Grid voor no-media-queries-responsive-design → Jen Simmon's Layout Land.
• Wanneer grid, flexbox, float of multicolumn → tips van Michelle Barker (vanaf 18:20) en Rachel Andrew.
• bram.us legt uit hoe je grids kunt animeren.
• En dan komt subgrid er ook alweer aan → uitleg van Rachel Andrew en Amid Sheen (uitgebreider).
• En dan is er ook nog grid met masonry lay-out op komst.

• Adam Argyle weet alles over het steeds krachtiger wordende scroll snap.
• Tekst rondom shapes.
• Robuste parallax met sticky.
• Nog steeds lekkere snackjes: aspect-ratio en object-fit met object-position.
• min(), max() en clamp().

• Uitdaging: Scroll-based animaties met @scroll-timeline → supertof (helaas nog wel achter een vlag 🚩).

Een lijstje links om je experiment te starten:

• :has() intro van Manuel Matuzović
• :has() longer read van Jen Simmons
• :has() advanced van Stephanie Eckles
• :has() lijstje met toepassingen van Jhey Tompkins
• :has() specificity van Manuel Matuzović

Als er nog tijd over is:

• 'Interactie'-selectors anders dan :hover en :focus, bijv. :valid, :checked, :in-range, :invalid i.c.m. forms:
  • een voorzichtige start op CSS-tricks,
  • meer moois van Chris Coyier en
  • een mooi voorbeeld van Joost.
• 'Parent'-selectors: :focus-within, :valid en :empty.
• Ook handig: :is(), :where() en :not().
• De psuedo-elements ::before en ::after:
  • om te stylen by Eric Meyer of
  • i.c.m. data-attributen of
  • voor spicy image overlays of
  • blurry overlays → van Ana Tudor, dus nerdy :-)

• Uitdaging: CSS Cascade Layers - intro video en een TLTR ;-).

Een lijstje links om je experiment te starten:

• Text-decoration-line, -color, -style, -thickness en -skip-ink en text-underline-offset en -position.

• (Mulitple) gradients (linear, radial, conic en repeating) → de basics van conic gradients, alle basics, Lea's gallery en Temani Afif's gallery.
• (Multiple) box shadows (ook goed te animeren :).

• Introductie van de mask properties.
• Clip-path en Mask → samples by Chris Coyier.
• Blend-mode → de basics en ze zijn te chainen.
• Filters:
  • De basis: CSS-filters.
  • Het grote broertje: SVG-filters
  • Backdrop-filter → als uitdaging: combineren met mask.
• CSS Tie-Dye Gradient Backgrounds → met blend-modes.
• Gooey blobs → met een SVG filter.
• CSS Halftone Patterns → met alle opties aan.

• Uitdaging: Gradients animeren met Houdini.
• Uitdaging: Mask compositing: the crash course (a la Ana Tudor).