In the name of Allah the most gracious the most merciful

CSS 'filter' editor - CFE

Introduction

CSS 'filter' editor is an educational project to make teaching CSS filters easier. The source code of this project is also written in an educational style. The project is written in pure web technologies and uses some basic javascript design patterns that can be useful to demonstrate the usage of closures and IIFEs in real pure-code projects and to show how to implement data bindings and how to open local images with pure javascript. It also demonstrates the power of JS and CSS themselves to make animations, syntax highlighting and prefect designs without using any third-party package. The layout is also written with flexbox but it is not so powerful but it also could have some educational usages in some cases :D

Live demo

UPDATE: Check out this wonderful online CFE and forget about the Codepen version: Wonderful CFE online

OUTDATE: Sadly this demo is not very good but I couldn't make it better in Codepen. However real CFE offers a bit more features (most of them are related to the UI). CFE Live demo

How to use

Its so easy to tell the functionality of every button in CFE but however here is a guide down below:

Run CFE

There is not any special requirement to install and run CFE (it doesn't need any installation by the way) but an updated GoogleChrome browser running on a desktop device. In order to open CFE just open the index.html file in GoogleChrome.

Note:

• The cross-browser feature of CFE is not been tested yet so it's good to open it in the place that the project developed in and that place is GoogleChrome!
• CFE is not so responsive especially when all three panels (sides in the source code) are open so make sure that you run it in a desktop device.

Panels

The main part of CFE is made of three panels which you can toggle the visibility of them:

• Image panel
• Options panel
• CSS panel (hidden by default) You can access the layout setting to toggle panels through the little arrow placed on the middle left of the screen. click 'Toggle x' to toggle the visibility of the 'X panel'.

Note:

• If you're using CFE to teach CSS filter property and its related functions, make sure you have the 'CSS panel' open which offers the full CSS styles you need to make the same image with a great syntax highlighting.that

Image panel

Simply shows the image with the filters applied on it. You can change the image URL or open a local image file through the native file dialog from the 'Options panel'. Remote URLs are also supported.

Options panel

This panel is the most important panel when it comes to edit the image which has to separated parts:

• Filters: Modify the CSS filters applied to an image or reset the applied filters to their defaults. You can also reset all changes by clicking on the 'Reset all' button at the bottom of the options table.
• Image: Described on the previous section (Image panel).

CSS panel (hidden by default)

This panel simply shows you all the CSS styles you need to make the same image with a great syntax highlighting which is so important when you're teaching CSS filters.

---

Wednesday, Farvardin 5, 1396 AP