Giters

elementor / elementor

The most advanced frontend drag & drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.

Home Page:https://elementor.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add new group control for the CSS filter property

ramiy opened this issue · comments

commented

Description

Elementor has a wide range of controls used in by all king of widgets. Let's add another one.

A new group control that will allow the user to defines visual effects (like blur, grayscale, brightness, contrast and more) to an element - usually an image of a video.

CSS filter property

The filter property has a very good support by modern browsers - https://caniuse.com/#feat=css-filters

See filter examples - http://bennettfeely.com/filters/

See filter info - https://www.html5rocks.com/en/tutorials/filters/understanding-css/

See filter usage - https://www.w3schools.com/cssref/css3_pr_filter.asp

Grayscale usage:

img {
   filter: grayscale(50%);
}

Multiple effects:

img {
   filter: blur(5px) brightness(0.45) contrast(1.05);
}

Group_Control_Filter

I was thinking it could be a popup like Group_Control_Text_Shadow and Group_Control_Box_Shadow.

It will have set of individual controls for each and every filter effect. Most of them will be sliders...

Widgets that use images can add this control to the style tab to alter the image using browser effects supported by CSS.