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

Use Inline CSS Variables to Position Elements

Jhey Tompkins
InstructorJhey Tompkins
  • css
    CSS

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.

illustration for Tic Tac Toe with CSS and SVG

Course

Tic Tac Toe with CSS and SVG

Build your Developer Portfolio and climb the engineering career ladder.
  • Search
  • Talks
  • Podcasts
  • Machine
  • Pricing
  • Store
©egghead.io
Terms & Conditions