1
Use Pug For Loops to Generate Form Markup
1m 59s
2
Use Type Reset to Reset Form State
53s
3
Use Display Grid To Lay Out Elements
1m 20s
4
Use Checkboxes to Optionally Display Elements
3m 33s
5
Use Inline CSS Variables to Position Elements
2m 46s
6
Use the Adjacent Sibling Combinator to Optionally Display Elements
1m 29s
7
Use Selector Combinations to Optionally Display Elements
2m 26s
8
Use SVG to Create Lines
1m 56s
9
Use Chained CSS Transforms to Position Elements
2m 26s
10
Use SVG to Create a Circle
1m 18s
11
Use SVG to Create an Animatable Cross
1m 6s
12
Use CSS Animation to Draw SVG
2m 10s
13
Use CSS Variable Scope to Color SVG Elements
1m 38s
14
Use Scoped CSS Variables to Stagger CSS Animations
1m 36s
15
Use a Backdrop Filter to Shift Focus to the Foreground
1m 5s
16
Use Animation Fill Mode to Retain Keyframe Styling
2m 8s
17
Use Pug Mixins for Reusable Blocks of Markup
3m 12s
18
Use Chained CSS Filter to Apply Visual Effects
52s
19
Use Media Queries to Detect a User Preference for Motion
48s
20
Use the Hover Pseudo Selector to Style Child Elements
56s
21
Use the Combination of Scoped CSS Variables and Pug to Generate Random CSS Animations
4m 19s

Use the Combination of Scoped CSS Variables and Pug to Generate Random CSS Animations

Share this video with your friends

The power of CSS variable scope and randomly generated inline CSS variables makes for some interesting opportunities. In this lesson, we take a look at how combining them can give you the ability to generate random animations.

I covered this for CSS Tricks.

Use the Combination of Scoped CSS Variables and Pug to Generate Random CSS Animations

Share this video with your friends

Course

Tic Tac Toe with CSS and SVG