This project started as a personal exercise to learn more about CSS variables and the possibility of integration with javascript. As the project evolved. I analized the potential o creating a tool that could be useful for future web development practices. Vizualizr aims to represent in a visual manner the chosen units for specific css filters on a desired image.
Working around the logistics of CSS variables, how can I name them so that it is easy to replace and update in javascript? See the working demo here.
:root {
--basecolor: rebeccapurple;
--border: 0px;
--blur: 0%;
--contrast: 100%;
--grayscale: 0%;
--hue-rotate: 0deg;
--invert:0%;
--saturate: 100%;
--sepia: 0%;}
img{
border: var(--border)
solid var(--basecolor);
filter: grayscale(var(--grayscale))
blur(var(--blur))
contrast(var(--contrast))
hue-rotate(var(--hue-rotate))
saturate(var(--saturate))
sepia(var(--sepia))
invert(var(--invert));
}
Range inputs for each CSS filter with custom datasets in order to facilitate the integration of javascript.
CSS3 variables. Variables, variables. Having previously relied on SaSS to compile CSS written with variables, this was a new concept to explore all together.
Learning about the usage of keyword 'this' in javascript when an object's method is invoked.