All examples

All examples

Examples to go with the workshop Let's dive into Modern CSS with Hidde de Vries.

Building blocks

Examples

  1. Custom properties - A button with custom properties

  2. Layers - Three header styles

  3. Real world nesting opportunities

  4. Examples of has()

  5. Container queries

Exercises

  1. Practice specificity

Tooltips & toggletips

Examples

  1. Tooltips - Icon button with tooltip

  2. Toggletip with popover

  3. Toggletips - Toggletip with popover

  4. Anchor positioning - Anchored chat box

Exercises

  1. Toggletips - Image with alt badge

Selects

Examples

  1. Standard select - Bread selector

  2. Custom selects - Bread selector upgraded

Exercises

Layouts & positioning

Examples

  1. Flexbox - Flexbox example: aligning across main axis

  2. Flexbox - Flexbox example: gaps

  3. Flexbox - Flexbox example: aligning across cross axis

  4. Grid Layout - Grid Layout example 1

  5. Subgrid - Cards in subgrid

  6. Text balance - Text balance

Exercises

  1. Flexbox - Exercise: form layout

  2. Flexbox - Exercise: center the cat

Transitions & animations

Examples

  1. View transitions - Books to details (1)

  2. View transitions - Books to details (2)

  3. Scroll driven animations

  4. Starting style example

Exercises