artistic.css

on YouTube ↗36m

" summary

Shows concrete techniques and outcomes: use CSS Grid and subgrid (available in Firefox Nightly) to break and rotate layouts, clip-path with embedded SVG paths to cut shapes, and image masking with alpha plus mask-composite (add, subtract, intersect, exclude) to layer effects. Demonstrations include blend modes (all 16) for pop‑art color, variable fonts and CSS transforms for playful typography, examples ported to live pages (Deck winner, NYT-style artful cuts), and practical tips like @supports fallbacks.

AI-written summary · about

" chapters (11)

1. 0:00Start
2. 1:27close your eyes
3. 3:43artistic & design movements
4. 5:51happy b-day
5. 10:21subgrid in CSS
6. 17:21CSS clipping
7. 19:15storytelling
8. 24:03blend modes
9. 25:06anti-design
10. 30:46quiz time!
11. 35:42observe the world

" related talks

• 42mBreaking the norm with creative CSSAgnieszka Naplocha · Codemotion Milan 2017
• 32mGet Ready for the Future of CSS!Guil Hernandez · CSS Conf EU 2017
• 24mBreaking the norm with creative CSSAga Naplocha · Frontend United 2018
• 31mGenerative Art with CSSSonia Ruiz · FrontFest 2020
• 51mCreative CSS LayoutMichelle Barker · CSS Day 2022
• 30mCutting-edge CSS features: Gaining control of Web DesignRazvan Caliman · CSSConf EU 2013
• 26mCSS animation Today (2021 Edition)Julia Miocene · CSSCamp 2021
• 35mA CSS CarolUna Kravets · Render Conference 2018