Bloggers Should Learn To Add CSS3 Filters in Blog | Filters Guide

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:

    1. Blur
    2. Brightness
    3. Contrast
    4. Drop-shadow
    5. Grayscale
    6. Hue-rotate
    7. Invert
    8. Opacity
    9. Saturate
    10. Sepia
    11. 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:

      1. 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 */      
      }

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

      Hue-rotate

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


      Hue-rotate will apply hue and rotate it on the image but we need to specify the values in degree. The Default will be 0deg and maximum will be 360deg.

      img {
      -webkit-filter: hue-rotate(90deg); /* Chrome, Safari */  
      -moz-filter:  hue-rotate(90deg);  /* Mozilla Firefox */ 
      -ms-filter:  hue-rotate(90deg);  /* Internet Explorer */ 
      -o-filter:  hue-rotate(90deg);  /* Opera */
      filter: hue-rotate(90deg);    /* Standard for All */  
          }

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

      Invert

      See the Pen CSS3 Adjust invert effect of the image by MD M Nauman (@mmnauman) on CodePen.
      Invert will make the image colors inverted. 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 inverted.

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

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

      Opacity

      See the Pen CSS3 opacity filter effect by MD M Nauman (@mmnauman) on CodePen.

      Opacity will set the transparency level of the image this Filter is similar to Opacity propertyNegative values are not allowed and will not work if added. 0% will be completely transparent. 100% will be default. 

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

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

      Saturate

      See the Pen CSS3 Saturate filter effect by MD M Nauman (@mmnauman) on CodePen.

      Saturate add the saturation to the image means more color to the image. Negative values are not allowed and will not work if added. 0% will remove all the saturation from the image and makes the image unsaturated. 100% will be default. values over 100% will produce over saturation effect.

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


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

      Sepia

      See the Pen CSS3 Sepia filter effect by MD M Nauman (@mmnauman) on CodePen.


      Sepia will converts the image to sepia. Negative values are not allowed and will not work if added. 0% is default here and 100% will completely transform the image and convert it to sepia.
      img {
      -webkit-filter: sepia(100%); /* Chrome, Safari */  
      -moz-filter:  sepia(100%);  /* Mozilla Firefox */ 
      -ms-filter:  sepia(100%);  /* Internet Explorer */ 
      -o-filter:  sepia(100%);  /* Opera */
      filter: sepia(100%);    /* Standard for All */            }


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

      URL

      URL Function will works with SVG Filter and takes the XML File Location.


      Short Hand Method to use Multiple Filters Together

      You can use more than one filter together just by separating with space.

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

      Conclusion: 

      Now We have Completed the post but what you need to do is Open your Code Editor and Copy the Filter which you like from it and play with it so that you can get used to it.

      CSS3 Filters are important if you are designing a website because you can edit images easily with few lines of code instead of using two images hence this will improve loading time of the site and improve your Site SEO.

      That's It Thanks For Following our Tutorial '' CSS3 Filters Guide - How To Use CSS3 Filter Effects in any Blog? '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.




      No comments:

      Post a Comment