Vizualizr Image Editor

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.

Vizualizr mockup

Technologies Used

HTML5 Icon CSS3 Icon JS Icon

Technical Challenges

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;
        --saturate: 100%;
        --sepia: 0%;}

        border: var(--border) 
        solid var(--basecolor);
        filter: grayscale(var(--grayscale)) 

<article id='basicmarkup'</article>

Range inputs for each CSS filter with custom datasets in order to facilitate the integration of javascript.

#styles{display: block;}

CSS3 variables. Variables, variables. Having previously relied on SaSS to compile CSS written with variables, this was a new concept to explore all together.

var title = 'javascript rocks';

Learning about the usage of keyword 'this' in javascript when an object's method is invoked.