├── css └── styles.css ├── index.html └── js └── script.js /css/styles.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --base: #ffc600; 3 | --spacing: 10px; 4 | --blur: 10px; 5 | } 6 | 7 | body{ 8 | text-align: center; 9 | background: #193549; 10 | color: white; 11 | font-family: 'helvetica neue', sans-serif; 12 | font-weight: 100; 13 | font-size: 50px; 14 | } 15 | 16 | .controls { 17 | margin-bottom: 50px; 18 | } 19 | 20 | input { 21 | width: 100px; 22 | } 23 | 24 | img{ 25 | padding: var(--spacing); 26 | background: var(--base); 27 | filter: blur(var(--blur)); 28 | width: 70%; 29 | height: 70%; 30 | } 31 | 32 | span{ 33 | color: var(--base); 34 | } 35 | 36 | h1{ 37 | font-size: 4rem; 38 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS VARIABLES & JS 8 | 9 | 10 | 11 |

JS UPDATING CSS VARIABLES

12 |

13 | Spacing: 14 | 15 | 16 | Blur: 17 | 18 | 19 | Base: 20 | 21 | 22 |

23 | 24 |

25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | const inputs = document.querySelectorAll(".controls input"); 2 | 3 | function update(){ 4 | const suffix = this.dataset.sizing || ""; 5 | document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); 6 | }; 7 | 8 | inputs.forEach(input => input.addEventListener("change", update)); 9 | inputs.forEach(input => input.addEventListener("mousemove", update)); --------------------------------------------------------------------------------