03_CSS_Variables

CSS Variables

Requirment

When user scroll the controller or change color picker's color, the image should also change. Spacing means the image's padding and color is the padding's color. Try use CSS variable to finish that.

Improvement

• split css and js file from html.

Basic Guide

• set CSS variable to root.
• add event to listen to the change and mousemove, and change the correspond CSS variables.

Relevent Resources

• blur
• style.setProperty()
• :root
• CSS variable
• document.documentElement
• change event
• mousemove event