Image Editor

Introduction

The web app allows the user to upload an image and using the side panel to change different filters & overlays over the image. The web app uses the latest CSS3 technology of CSS variables.

Technologies

HTML5 CSS3 JavaScript ES6 SASS Grunt File API

Design Features

The design is based on a card layout with two panels. The design is minimalistic as the user focuses on the changing the filters & overlays to produce different variations of the image. Inputs are custom styled to match the blue, white theme of the web app.

Development Features

The user uploads an image using the file reader API and then inserted onto the page. Then the sliders change CSS3 filters and add padding to make it seem like a border. The next panel the user can select an overlay with different gradients such as radial and linear to create an Instagram-like effect.