Add new group control for the CSS filter property
ramiy opened this issue · 1 comments
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.