believenstephen / dynamic-css-variables

Dynamic CSS Variables and JS

A web-based project that allows users to dynamically update CSS variables using JavaScript. This project demonstrates the interaction between HTML, CSS, and JavaScript to create a responsive and interactive user interface.

Project Structure

• index.html: The main HTML file containing the structure, styles, and JavaScript for dynamically updating CSS variables.
• images/: A folder containing the image used in the project.

How to Use

1. Open the index.html file in a web browser.
2. Use the range sliders to adjust the spacing and blur of the image.
3. Use the color picker to change the base color.

Features

• Dynamic CSS Variables: Update CSS variables on the fly using JavaScript.
• Responsive Design: Ensures the image and controls fit within the viewport.
• Interactive Controls: Users can adjust spacing, blur, and color using input elements.

Technologies Used

• HTML: Provides the structure of the web page.
• CSS: Defines the styles and layout.
• JavaScript: Handles the dynamic updates to CSS variables based on user input.

Contributing

This project is not open for external contributions.

License

This project is not licensed for open source use.