Course

Tic Tac Toe with CSS and SVG

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 Inline CSS Variables to Position Elements

Name: Use Inline CSS Variables to Position Elements
Uploaded: 2021-02-01T14:52:26-06:00
Duration: 2 min 46 s
Description: By generating inline CSS variables with a markup preprocessor like Pug, we're able to generate CSS variables for positioning based on a loop index.

InstructorJhey Tompkins

Share this video with your friends

Send Tweet

By generating inline CSS variables with a markup preprocessor like Pug, we're able to generate CSS variables for positioning based on a loop index.

View code for this lesson

Tic Tac Toe with CSS and SVG

Use Inline CSS Variables to Position Elements

Social Share Links