CSS-Variables-Manipulated-with-JS/index.html at master · Francisco-Webdeveloper/CSS-Variables-Manipulated-with-JS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Scoped CSS Variables and JS</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h2>Update CSS Variables with <span class='hl'>JS</span></h2>

  <div class="controls">
    <label for="spacing">Spacing:</label>
    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

    <label for="blur">Blur:</label>
    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

    <label for="grayscale">Grayscale</label>
    <input id="grayscale" type="range" name="grayscale" min="0" max="100" value="50" data-sizing=%>

    <label for="contrast">Contrast</label>
    <input id="contrast" type="range" name="contrast" min="0" max="400" value="100" data-sizing=%>

    <label for="base">Base Color</label>
    <input id="base" type="color" name="base" value="#32f2af">

  </div>

  <img src="https://source.unsplash.com/2N0PVuB0byQ/800x500">

  <script src="main.js"></script>

</body>

</html>