Created
December 29, 2017 18:46
-
-
Save m1k3yfoo/dd01be370d59bb05bc847fd95a285b57 to your computer and use it in GitHub Desktop.
[CSS Variables] #JavaScript, #CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Scoped CSS Variables and JS</title> | |
</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="base">Base Color</label> | |
<input id="base" type="color" name="base" value="#ffc600"> | |
</div> | |
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500"> | |
<style> | |
/* Declaring CSS variables */ | |
:root { | |
--base: #ffc600; | |
--spacing: 10px; | |
--blur: 10px; | |
} | |
img { | |
padding: var(--spacing); | |
background: var(--base); | |
filter: blur(var(--blur)); | |
} | |
/* Anything with a class "highlight" */ | |
.hl { | |
color: var(--base); | |
} | |
/* | |
misc styles, nothing to do with CSS variables | |
*/ | |
body { | |
text-align: center; | |
background: #193549; | |
color: white; | |
font-family: 'helvetica neue', sans-serif; | |
font-weight: 100; | |
font-size: 50px; | |
} | |
.controls { | |
margin-bottom: 50px; | |
} | |
input { | |
width:100px; | |
} | |
</style> | |
<script> | |
/* Selecting all the elements with the inputs under class "controls" */ | |
const inputs = document.querySelectorAll('.controls input'); | |
function handleUpdate() { | |
console.log(this.value); | |
// Referencing input element's 'data-sizing' attribute. 'data-sizing' is a custom data attribute for adding the 'px' unit to our values | |
const suffix = this.dataset.sizing || ''; | |
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); | |
} | |
// Listen for change on the inputs | |
inputs.forEach(input => input.addEventListener('change', handleUpdate)); | |
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment