Update CSS Variables with JS
How do I make an update css variables with js?
What is a update css variables with js? How do you make a update css variables with js? This script and codes were developed by Wes Bos on 09 December 2022, Friday.
Update CSS Variables with JS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Update CSS Variables with JS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
<div class="controls"> <label>Spacing:</label> <input type="range" id="spacing" min="10" max="200" value="10"> <label>Blur:</label> <input type="range" id="blur" min="0" max="25" value="10"> <label>Base Color</label> <input type="color" id="base" value="#ffc600">
</div>
<img src="http://unsplash.it/800/500?image=899">
<p class="love">Made by <a href="https://twitter.com/wesbos">@wesbos</a>
Update CSS Variables with JS - Script Codes CSS Codes
:root { --base: #ffc600; --spacing: 10px; --blur: 10px;
}
body { text-align: center;
}
img { padding: var(--spacing); background: var(--base); -webkit-filter: blur(var(--blur)); /*
Update CSS Variables with JS - Script Codes JS Codes
// get the inputs const inputs = [].slice.call(document.querySelectorAll('.controls input')); // listen for changes inputs.forEach(input => input.addEventListener('change', handleUpdate)); inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); function handleUpdate(e) { // append 'px' to the end of spacing and blur variables const suffix = (this.id === 'base' ? '' : 'px'); document.documentElement.style.setProperty(`--${this.id}`, this.value + suffix); }
Developer | Wes Bos |
Username | wesbos |
Uploaded | December 09, 2022 |
Rating | 4.5 |
Size | 2,335 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Animation with CSS Variables | 2,504 Kb |
WTFCSS | 2,038 Kb |
CSS Character Units | 1,756 Kb |
Web Speech Demo | 2,073 Kb |
JavaScript Challenge | 1,650 Kb |
Animate in from an empty state | 2,644 Kb |
Object Fit for Videos | 2,543 Kb |
GetUserMedia Meets Voxel CSS | 3,178 Kb |
Video Speed Scrubber | 2,782 Kb |
Responsive Flexbox Circles | 1,929 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
SVG Animation | Thepheer | 4,793 Kb |
Search field | Jamesbarnett | 2,100 Kb |
The Monty Hall Problem | Melatonind | 4,360 Kb |
Sketchy Box | Mnicpt | 3,033 Kb |
HEXAGON | Aurumlux | 1,684 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
V.35 The Monolith Update - Hero Release Notes | Jordan | 12,045 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
Price | Catcode | 2,623 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!