Kennismakings­oefening

Een lijstje links om je experiment te starten:

• 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.
• Na lang wachten lijken container queries er dan echt te komen. Joehoe.
• 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: A DRY approach to color themes in CSS.
• Uitdaging: Quantity Queries for CSS.

Een lijstje links om je experiment te starten:

• calc() → the complete guide.
• Units verder dan px, em en rem, bijv. vmin/vmax, ch, ex, cm....
• min(), max() en clamp().

• Custom properties:
  • een introductie,
  • rekenen met unit-less custom properties,
  • fallbacks,
  • logica → samples by Ana Tudor (pas op nerdy) en
  • ook gewoon handig voor themes.

• Uitdaging: A DRY approach to color themes in CSS.
• Uitdaging: Gradients animeren met Houdini.
• Uitdaging: Quantity queries for CSS.

Een lijstje links om je experiment te starten:

• '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, bijv. :has()!!!, :focus-within, :valid en :empty.
• 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 :-)
• Andere onterecht onbeminde selectors → check de almanac.

• Uitdaging: CSS Cascade Layers - 5 min intro video en een TLTR ;-).
• Uitdaging: Maak een betere selector-quiz (met prijzen :-).

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 → voorzetje van Rachel Andrew.

• Tekst rondom shapes.
• Robuste parallax met sticky.
• Nog steeds lekkere snackjes: aspect-ratio en object-fit met object-position.
• min(), max() en clamp().

• Uitdaging: Geanimeerde shapes.
• Uitdaging: Scroll-based animaties met @scroll-timeline → supertof, nog wel achter een vlag 🚩.

Een lijstje links om je experiment te starten:

• Transforms chainen → 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.

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

Een lijstje links om je experiment te starten:

• Clip-path en Mask → samples by Chris Coyier.
• Blend-mode → the basics en ze zijn te chainen.
• CSS-filters of de grote broer SVG-filters.
• (Mulitple) gradients (linear, radial, conic en repeating) → the basics en Lea's gallery.
• Text-decoration-line, -color, -style, -thickness en -skip-ink en text-underline-offset en -position.
• Nieuwe kleuren: lch() én kleurenfuncties: color-mix(), color-contrast(), nog wel achter een vlag 🚩.
• Backdrop-filter → als uitdaging: combineren met mask.

• Uitdaging: Mask compositing: the crash course (a la Ana Tudor).
• Uitdaging: Gradients animeren met Houdini.
• Nog een uitdaging: de andere artikelen van Ana Tudor!