CSS3 FILTERS



The CSS filter property lets you apply effects like blurring. Filters are commonly used to adjust the view of images, backgrounds, and borders. CSS3 Filters functions include blur(), brightness, drop-shadow(), grayscale(), invert(), opacity(), saturate() and sepia().

The drop-shadow Function

drop-shadow(width height  blur  color) creates a shadow effect like CSS3 box-shadow. Example:
.dropshadow {
filter: drop-shadow(5px 9px 2px blue);
}

.dropshadow {
filter: drop-shadow(-5px -9px 2px blue);
}
Positive values create the shadow to the right and negative values create the shadow to the left

The grayscale Function.

Thegrayscale function converts an image to grayscale(black and white). 0% grayscale is the original image, where  100% makes the image completely grayscale. Example
.filtered  {
  filter: grayscale(100%);
}
Note: Any negative value leaves the image unchanged.

The sepia Function

The sepia function converts an image to sepia which makes black and white photos look a bit more eye-catching than the grayscale image. 0% sepia is the original image, where 100% converts the image to sepia completely. Example:
.filtered
{
  filter: sepia(100%);
}

The saturate Function

The saturate function controls the color saturation for an image. The parameter can be either a percentage value or a number. 0% creates a completely unsaturated image (grayscale), where 100% is the original image. Example:
 .filtered {
  filter: saturate(50%);
}

The invert Function

The invert function inverts the colors of an image to make dark areas bright and bright areas dark. The parameter can be either a percentage value or a number. 0% invert leaves the image unchanged, where, 100% creates a completely inverted image. Example:
.filtered
{
  filter: invert(70%);
}

The opacity Function

Theopacity function sets the opacity of an image to change its transparency. 0% opacity creates a completely transparent image, where 100% is the original image. Example:
.filtered
{
  filter: opacity(70%);

}

The brightness Function

The brightness(amount) function adjusts the brightness of an image, making it appear brighter or darker. The value can take either a percentage value or a number. 0% – Completely black. 100% – Unchanged. Over 100% – Produces a brighter image. Example:
.filtered
{
  filter: brightness(50%);


}

The blur Function

The blur function applies a blur effect to an image. The blur function has only one parameter, radius, which defines how much an image gets blurred. Example:
.blured {
 filter: blur(5px);
}