How to Blur, Grayscale, Brightness and More in CSS

View: 343    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: HTML-CSS template   Fields: Other

19 point/2 review File has been tested

Filters were originally part of the SVG specification. However, when their usefulness became evident, W3C started working on adding some common filter effects to CSS as well. CSS filters are pretty powerful and incredibly easy to use. You can use them to blur, brighten or saturate images among other things.

Introduction

Filters were originally part of the SVG specification. However, when their usefulness became evident, W3C started working on adding some common filter effects to CSS as well. CSS filters are pretty powerful and incredibly easy to use. You can use them to blur, brighten or saturate images among other things. They can be used alone or in combination with other filters. You need to use the following syntax to apply filters in CSS:

filter: <filter-function> [<filter-function>]* | none

Now, let’s go over all these filters briefly.

Brightness

This filter controls the brightness of your images. It accepts values greater than or equal to zero as its parameter. A value of 0% will give you a completely black output. Similarly, a value of 100% will give you the original image. You can specify values greater than 100% to get even brighter images. For instance, a value of 300% will make the image 3 times as bright:

img {
  filter: brightness(300%);
}

Contrast

This filter controls the contrast of your images. Just like the brightness filter, it also accepts values greater than or equal to zero. This filter controls the difference between dark and light parts of the image in CSS. Therefore, a value of 0% results in a gray image. Setting the contrast to 100% gives you the original image and any value beyond that will further increase the image contrast:

img {
  filter: contrast(0%);
}

Grayscale

As evident from the name, this filter can help you make your images grayscale. This filter gradually converts all the colors in our images to some shade of gray. A value of 0% will have no effect on our images and a value of 100% will turn them completely grayscale. Negative values are not allowed.

img {
  filter: grayscale(100%);
}

Saturate

This filter controls the saturation of colors in your images. A value of 0% will completely remove all colors from the image, while a value over 100% will make the image supersaturated. At 100%, the final result looks just like the original image. Negative values are not allowed for this filter.

img {
  filter: saturate(0%);
}

Sepia

This filter adds a sepia tinge to your images like some old photographs. The amount of sepia added depends on the percentage. At 0%, the final result looks like the original image and at 100% the image will be completely sepia.

img {
  filter: sepia(100%);
}

Hue-rotate

This filter applies a hue-rotation to all the colors in your images. The angle at which the colors are rotated depends on the value of the parameter specified. At a value of 0deg, the image remains unchanged. There is no maximum value for this filter. However, the effect of values above 360deg wraps around. This means that both the values 90deg and 450deg will have the same effect.

img {
  filter: hue-rotate(90deg);
}

Invert

This filter inverts all the colors in your images. The amount of inversion depends on the value of the parameter passed. A value of 0% will not have any effect on the original image, but a value of 100% will completely invert it.

img {
  filter: invert(100%);
}

Blur

This filter applies a Gaussian blur to the images. It smudges the colors together and spreads them outside their edges. The radius parameter that you pass to this filter determines how many pixels on the screen blend into each other. Larger values will provide more blur. This filter can accept any of the length values except percentage.

img {
  filter: blur(1px);
}

Opacity

This filter will make your images semi-transparent. The images will be completely opaque at 100% and fully transparent at 0%. This filter is similar to the well-known opacity property. One difference between these two is that of performance. The filter property is hardware accelerated on some browsers which can result in better performance.

img {
  filter: opacity(75%);
}

Drop Shadow

As the name suggests, this filter adds a drop shadow effect to images. It is basically the blurred, offset version of the input image’s alpha mask drawn in a particular color that you provide. This property requires both the x and the y offset as well as the color of the drop shadow. You can also optionally provide a blur-radius value which will determine if the shadow will be sharp or blurry.

img {
  filter: drop-shadow(5px 5px 10px #666);
}

Url()

While all the filters we discussed up to this point are pretty useful, they are rather general purpose filters. Your project might require something more specific. If none of the filters above meets your requirements, you can create your own SVG filter and use its id to reference it using the url() filter.

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="greenish">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5"/>
      <feFuncG type="linear" slope="2" intercept="-0."/>
      <feFuncB type="linear" slope="2" intercept="-0.25"/>
    </feComponentTransfer>
  </filter>
  <filter id="bluish">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5"/>
      <feFuncG type="linear" slope="2" intercept="-0.1"/>
      <feFuncB type="linear" slope="2" intercept="0"/>
    </feComponentTransfer>
  </filter>
</svg>

<style type="text/css">
img {
  filter: url('#greenish');
}
</style>

Combining and Animating Filters

You can also combine multiple filters together to get a variety of effects. Most of the time, the order of filters does not matter much, however, filters are applied in the order they are placed in your CSS and some filters will override others. For instance, using a sepia filter after a grayscale filter will result in a sepia image but using grayscale after sepia will produce a grayscale image.

Filters can also be animated. If you animate them properly, you can create some very interesting effects. Take the following code snippet as an example:

img {
  animation: haunted 3s infinite;
}

@keyframes haunted {
  0% {
    filter: brightness(20%);
  }
  48% {
    filter: brightness(20%);
  }
  50% {
    filter: sepia(1) contrast(2) brightness(200%);
  }
  ....
  96% {
    filter: brightness(400%);
  }
}

How to Blur, Grayscale, Brightness and More in CSS

How to Blur, Grayscale, Brightness and More in CSS Posted on 15-07-2016  Filters were originally part of the SVG specification. However, when their usefulness became evident, W3C started working on adding some common filter effects to CSS as well. CSS filters are pretty powerful and incredibly easy to use. You can use them to blur, brighten or saturate images among other things. 9.5/10 343

Comment:

To comment you must be logged in members.

Files with category

 

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd