Creating Instagram Effects with CSS3 Filters

With the current development of CSS3, making websites more sophisticated, and looking smarter, of course this is good news for web designers.

This time we will discuss a little about CSS3 Filters.

What are CSS3 Filters?
Filters bring effects to the dom, with filters we can create effects that we usually do with Adobe Photoshop or other image management software into our html documents, such as images or forms.

Browser Support
Unfortunately, currently only Chrome supports this facility, so the results cannot be seen when using Firefox.

How to use
In this article we will try some CSS Filter effects that we can use to give an effect to an image.

HTML
First, create an HTML structure like the following:

CSS
For css, please copy the script snippet below.

Blur
Blur
Blur

.filter img{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}
Grayscale
Grayscale
Grayscale

.filter img{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filters: grayscale(100%);
}
Sepia