Bloggers Should Learn To Add CSS3 Filters in Blog

Hello Everyone We Know That how CSS is used for setting the visual Style of the Websites or Blogs. But now we go little advance and learn to use CSS3 Filters.

CSS3 is the latest standard for CSS. CSS3 has many features along with few disadvantages. One of the best feature is CSS3 is Completely backwards-compatible with earlier versions of CSS. So we can use CSS Selectors and Properties with the updated one.

The major drawback is that it is supported by the latest versions of browsers but for to use in every browser we should add the prefix of the browser For Mozilla Firefox we should add -moz- . For Google Chrome, Safari, Opera we should use the prefix -webkit- .

CSS3 Browser Compatibility issue
-webkit-	Google Chrome, Safari
-moz-	Mozilla Firefox
-ms-	Internet Explorer
-o-	Opera

Always use the above one if you find that some CSS3 properties are not working. If you found that filter property is not working in Firefox then use -moz- as prefix then use filter same as normally we use,

Examaple:

img{
-moz-filter: blur(10px); /* This will make the filter property to run in firefox. */
filter: blur(10px); /* This is the standard method for other compatible browsers */
}

So If you want CSS3 Filter to support all the browsers then add all the short names as prefix given in the table.

Example:

img{
-webkit-filter: brightness(150%); /* Chrome, Safari */
-moz-filter: brightness(150%); /* Mozilla Firefox */
-ms-filter: brightness(150%); /* Internet Explorer */
-o-filter: brightness (150%); /* Opera */
filter: brightness(150%); /* Standard for All */
}

What is CSS3 Filters Guide?

CSS3 Filters Guide is a guide where we have shared the information of all the CSS3 filters. This Filters are used to add visual effects to the Markup Elements like images etc.

Earlier to add this visual effects Web Designers use two images which was edited by some big photo editing software like Photoshop or others. Now We can Achieve similar advance visual effects with CSS3 Filters instantly This will improve loading speed of the site as we are using only single image.

This are the following filters:

Blur

Brightness

Contrast

Drop-shadow

Grayscale

Hue-rotate

Invert

Opacity

Saturate

Sepia

Url

Why & How To Use CSS3 Filter Effects in any Blog?

CSS3 Filter Effects Can be achieved without any third party scripts or stylesheets. It is build in browser only thing you need to know is whether the browser support this filter property and if it is not supported then how to add support to it.

Use this Site To Know Whether the CSS3 Filters are supported by all major browsers

Can I Use

Filters Can used When you want a hover effect, on load effect, on click, simple animation etc for example on hover the image will turn to Grayscale. or on hover the image will be blurred or on hover the logo image the logo gets inverted. you can use this in any widget increase the opacity or to completely hide the element.

Let Start! How To Use CSS3 Filter Effects in any Blog?

To use Filter effect on any image then use it like this:

Blur

Blur Effect will make the image blurred you can use (px) or percent (%) if the value is larger then you will see the image getting more blurred. The default value will be 0 either in (px) or (%)

See the Pen CSS3 Blurred Effect Before and after by MD M Nauman (@mmnauman) on CodePen.

img { -webkit-filter: blur(10px); /* Chrome, Safari */ filter: blur(10px);}

If you want the image to blur on Mouse hover then use this type of code

img:hover { -webkit-filter: blur(10px); /* Chrome, Safari */ filter: blur(10px);}

If you want to apply blur effect on particular image or some set of images then use the images parent like.

If you want to use this type of effects in blogger post images then you can use this type of code

For Blogger Users:

.post-body img:hover { -webkit-filter: blur(10px); /* Chrome, Safari */ filter: blur(10px);}

For Other Users:

Use The Image parent div or any other parent id or class.

your_Id_Or_Class img:hover {
-webkit-filter: blur(10px); /* Chrome, Safari */
filter: blur(10px);
}

Brightness:

See the Pen CSS3 Adjust Brightness of the image by MD M Nauman (@mmnauman) on CodePen.

With This Brightness Property you can adjust or play with brightness of the image. The Default Brightness of the image will be 100% you can if you want to increase the brightness of the image then you have to write the values over 100% and values below 100% will darken the image.

img {
-webkit-filter: brightness(150%); /* Chrome, Safari */
-moz-filter: brightness(150%); /* Mozilla Firefox */
-ms-filter: brightness(150%); /* Internet Explorer */
-o-filter: brightness (150%); /* Opera */
filter: brightness(150%); /* Standard for All */}

Use This as We have Showed you Above in the Blur Property Section:

Contrast:

See the Pen CSS3 Adjust Contrast of the image by MD M Nauman (@mmnauman) on CodePen.

With This Contrast Property You can Increase or Decrease Contrast of the image. This property will add Sharpness to the image. The Default Contrast of the image will be 100% you can if you want to increase the Contrast of the image then you have to write the values over 100% and values below 100% will darken the image.

img {
-webkit-filter: contrast(150%); /* Chrome, Safari */
-moz-filter: contrast(150%); /* Mozilla Firefox */
-ms-filter: contrast(150%); /* Internet Explorer */
-o-filter: contrast(150%); /* Opera */
filter: contrast(150%); /* Standard for All */}

Use This as We have Showed you Above in the Blur Property Section:

Drop Shadow:

See the Pen CSS3 Adjust Drop Shadow of the image by MD M Nauman (@mmnauman) on CodePen.

Drop Shadow property is similar to box shadow here we need to specify 4 parameters and one more is optional.

filter: drop-shadow( h-shadow v-shadow blur spread color )

h-shadow here means Horizontal Shadow This is required field you can use px. Negative values will place the shadow to the left of the image.

v-shadow here means Vertical Shadow This is also required field you can use px. Negative values will place the shadow at the top of the image

blur here Adds a blur effect to the shadow This is also required you must add the values in pixels (px). Negative values are not not allowed and will not work if added. The default will be 0. The larger the values the the shadows will become more blur.

Spread here Adds a Spread effect to the shadow This is Optional and not supported by some browsers you must add the values in pixels (px). The default value will be 0. The larger the values the shadow spread more and expand.

Color here means the color of the shadow so add the color as the last parameter in order to change the color of the shadow. This is required field because we want a color of our choice if you forget to add the color parameter then the browser will take its default color often it will be black.

img {
-webkit-filter: drop-shadow(0px 0px 10px red); /* Chrome, Safari */
-moz-filter: drop-shadow(0px 0px 10px red); /* Mozilla Firefox */
-ms-filter: drop-shadow(0px 0px 10px red); /* Internet Explorer */
-o-filter: drop-shadow(0px 0px 10px red); /* Opera */
filter: drop-shadow(0px 0px 10px red); /* Standard for All */ }

Use This as We have Showed you Above in the Blur Property Section:

Grayscale:

See the Pen CSS3 Adjust grayscale of the image by MD M Nauman (@mmnauman) on CodePen.

Grayscale Property will transform the image and convert it to grayscale and make the image like black and white images. Negative values are not not allowed and will not work if added. The default will be 0% if not used. if you use 100% then the image will be completely grayscale.

img {
-webkit-filter: grayscale(100%); /* Chrome, Safari */
-moz-filter: grayscale(100%); /* Mozilla Firefox */
-ms-filter: grayscale(100%); /* Internet Explorer */
-o-filter: grayscale(100%); /* Opera */
filter: grayscale(100%); /* Standard for All */
}