{"id":1768,"date":"2015-11-04T10:50:15","date_gmt":"2015-11-04T16:50:15","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1768"},"modified":"2015-11-04T10:50:15","modified_gmt":"2015-11-04T16:50:15","slug":"how-to-alter-images-using-css-filters","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-alter-images-using-css-filters\/","title":{"rendered":"How To Alter Images Using CSS Filters"},"content":{"rendered":"

CSS filters allow you to do some funky\u00a0stuff to HTML elements using only CSS. A fun way to take advantage of this cool tool is to use it to put filters on your images, much like the ones you would add to your images on photo editing applications like Photoshop or Instagram.\u00a0CSS filter isn’t supported on every browser yet, and it usually has to be used with\u00a0the -webkit-<\/strong> prefix, but it’s still very useful to be able to apply filters to your photos using only CSS.<\/p>\n

The syntax is pretty straightforward. Below, I have an image that I assigned\u00a0the class of “change-me”<\/b>. All I have to do is apply the -webkit-filter<\/strong> selector to it and input the desired parameters. <\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. .change-me{<\/span><\/div><\/li>\n
  2. -webkit-filter:<\/span> blur(<\/span>10px<\/span>)<\/span>;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    Here’s what “change-me<\/strong>” looks like without any filter:<\/p>\n

    \"foliage\"<\/p>\n

    And here’s how it looks with 10px of blur applied to it:<\/p>\n

    \"blur\"<\/p>\n

    The blur filter is the only one that takes pixel values. The rest: saturate, contrast, brightness, grayscale, sepia, invert, and opacity take number and\/or percentage values.<\/p>\n

    You can saturate (or de-saturate!) an image using the saturate filter. Use a percentage 0-100% to de-saturate the original image (0% is no saturation, 100% is the saturation value of the original image). If you want to add saturation, you can use any number over 1. The higher the number you use, the more saturated the image will get. Here’s an example of an image with only 30% of its original saturation:<\/p>\n

    \"saturate\"<\/p>\n

    The code for the above image looks like this:<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. &lt;<\/span>\/p&gt;<\/span><\/div><\/li>\n
    2. &lt;<\/span>p style=<\/span>&quot;<\/span>text-align<\/span>:<\/span> left<\/span>;<\/span>&quot;<\/span>&gt;<\/span>.change-me{<\/span><\/div><\/li>\n
    3. -webkit-filter:<\/span> saturate(<\/span>1<\/span>)<\/span>;<\/span><\/div><\/li>\n
    4. }<\/span>&lt;<\/span>\/p&gt;<\/span><\/div><\/li>\n
    5. &lt;<\/span>p style=<\/span>&quot;<\/span>text-align<\/span>:<\/span> left<\/span>;<\/span>&quot;<\/span>&gt;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      Want your image to look like it’s old or faded? There are CSS filters for that. Use the\u00a0sepia<\/strong> or grayscale<\/strong>\u00a0filters (each of which takes percentage values\u00a0from 0-100) to achieve the desired effect. A filter of grayscale(100%)<\/strong> was used on the example below.<\/p>\n

      \"grayscale\"<\/p>\n

      CSS filters also lets you use multiple filters at once. Let’s say you wanted to blur your image and make it a little bit brighter at the same time. \u00a0Your CSS code would need to look something like this:<\/p>\n

      \r\n\r\n\t\t
      \r\n\r\n\t\t
      \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
      css<\/div>\r\n\r\n\t\t\r\n\t\t
      \r\n\r\n\t<\/div>\r\n\t\r\n\t
      \r\n\t\t
      1. &lt;<\/span>\/p&gt;<\/span><\/div><\/li>\n
      2. &lt;<\/span>p style=<\/span>&quot;<\/span>text-align<\/span>:<\/span> left<\/span>;<\/span>&quot;<\/span>&gt;<\/span>.change-me{<\/span><\/div><\/li>\n
      3. -webkit-filter:<\/span> blur(<\/span>20px<\/span>)<\/span> brightness(<\/span>1.5<\/span>)<\/span>;<\/span><\/div><\/li>\n
      4. }<\/span>&lt;<\/span>\/p&gt;<\/span><\/div><\/li>\n
      5. &lt;<\/span>p style=<\/span>&quot;<\/span>text-align<\/span>:<\/span> left<\/span>;<\/span>&quot;<\/span>&gt;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

        And this is what the filtered image would look like:<\/p>\n

        \"blurbrightness\"<\/p>\n

        Check out\u00a0this page<\/a> to learn how to use even more CSS filters.<\/p>\n

        Share and Enjoy !<\/h3>
        0<\/span><\/span>Shares<\/small><\/div>
        <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

        CSS filters allow you to do some funky\u00a0stuff to HTML elements using only CSS. A fun way to take advantage of this cool tool is to use it to put filters on your images, much like the ones you would […]<\/p>\n

        Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1768"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1768"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1768\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}