Lea Verou
MIT
Check out a free preview of the full Dynamic CSS with Custom Properties (aka CSS Variables) course
The "Numeric Range Exercise" Lesson is part of the full, Dynamic CSS with Custom Properties (aka CSS Variables) course featured in this preview video. Here's what you'd learn in this lesson:
Students are instructed to create a variable that controls both the position of the radial gradient and position of the text shadow.
Preview
CloseTranscript from the "Numeric Range Exercise" Lesson
[00:00:00]
>> Here we have a heading with large shadow and the background that is a spotlight. And what we want to do is right now, the spotlight is at the top left corner. And notice how we can increase this number, the center of radial gradient, to make it move to the top right corner from 0 to 100%.
[00:00:31]
And we also want the offset of the shadow to change accordingly to -1M. So let's take a few minutes to practice making this a variable that controls both of these at once. And then we could even write an animation around our variable.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops