22 Jun 2016

WebSite design has been evolved a lot much from its startup. New and new design trends are emerging to give most real life dynamic experience to the website visitor. Here we can read about some CSS Filters which we use to apply effects in images in website.


1. SVG Filter

SVG filters have the widest support (even in Internet Explorer and Edge!) and are also (almost) just as easy to use as CSS filters directly. We can use them with the same filter property.  CSS filters are stemmed out of SVG filters. As with canvas, SVG filters allows to transcend the flat plane of two-dimensional effects, to leverage WebGL shading to create even more complex results.

There are a few ways to apply an SVG filter. The filter property on the background image, just like the CSS filter example for consistency. The biggest difference with SVG filters is that we need to be careful to include and link to this filter with the proper path. This means we need to import the SVG on the page above the element in which we are using it (which can be made easier by using templating engine and include statements).
 
Sample code below


.svgfilter-gray {
  background: url('img/bird.jpg');
  -webkit-filter: url(#grayscale-filter);
  filter: url(#grayscale-filter);
}


2. Background Blend Mode Filter

There are two type of Blend Mode as follows. The mix-blend-mode property and the background-blend-mode property.

mix-blend-mode is the property which describes how the element will blend with the content behind it. Background-blend-mode is used for elements with multiple backgrounds, and describes the relationship between these backgrounds.

background-blend-mode does the luminosity to pull luminosity channels over a gray background  resulting in a grayscale image. Background images must always be ordered before solid colors or gradient backgrounds for effects to render properly. Color must be the last background layer. This is to make compatibility with older web browsers.

The only difference with blend modes and the CSS filter is that we now have multiple backgrounds, and are using background-blend-mode: luminosity, which grabs the luminosity values from the top image and layers those brightness values over a gray second background.
 
A sample code below

.cssfilter-gray {
  background: url('img/bird.jpg'), gray;
  background-blend-mode: luminosity;
}

This supports Chrome, Firefox, and has partial Safari support.  

3.GrayScale Effect

The syntax to achieve this effect is here > :
filter: grayscale(1).

This will  desaturates the image and can be used with any numeric or percentage-based value between 0 and 1 (or 0% to 100%).
Note: currently, filters for WebKit-based browsers must be prefixed with -webkit-. However, a solution such as Autoprefixer would eliminate the need to add them by hand.
 
A working sample code below :

.cssfilter-gray {
  -webkit-filter: grayscale(1);
  background: url('img/bird.jpg');
  filter: grayscale(1);
}

4. HTML5 Canvas Filter

HTML5 


For website, Mobile app (Android / iPhone) design & development Call 0471-2722111 / (+91) 813-888-4152


has a ton of features when it comes to image manipulation, because it has access to each individual pixels data (specifically through canvasContext.getImageData) . This can be manipulated through JavaScript. 

we can achieve a grayscale effect with by strip the red, green and blue components from any outlying value in the pixel value while maintaining its luminosity level (brightness). One way to do this is to average the RGB values like so: grayscale = (red + green + blue) / 3;.
 
 

We can achieve simple image effects through CSS filters, as they have the widest support and simplest usage. For more complex image effects, we shall rely on  SVG filters or CSS blend modes. SVG filter effects are particularly nice because of their channel manipulation capabilities and feColorMatrix. CSS blend modes also offer some really nice visual effects with overlapping elements on the page.