HOLLA TECH - LEARN

The grayscale Function
 

The grayscale function converts an image to grayscale.
The only parameter defines the proportion of the conversion.

0% grayscale is the original image, whereas 100% makes the image completely grayscale.

Here is an example using a percentage value to make an image completely grayscale: 

.filtered {
  filter: grayscale(100%);
}

 

NOTE!
Any negative value leaves the image unchanged.

The sepia Function
 

The sepia function converts an image to sepia.
This is similar to using grayscale but with a reddish-brown color tone.

The idea behind sepia filters is that they can make black and white photos look a bit more eye-catching than the basic grayscale version.

0% sepia is the original image, whereas 100% converts the image to sepia completely:

.filtered {
  filter: sepia(100%);
}

 


The saturate Function
 

The saturate function controls the color saturation for an image. The only parameter determines the proportion of the saturation that is applied to the image.
The parameter can be either a percentage value or a number.

0% creates a completely unsaturated image (grayscale), whereas 100% is the original image.

.filtered {
  filter: saturate(50%);
}

 

Here is an example using a number value to make an image super-saturated:

.filtered {
  filter: saturate(2.5);
}

 

NOTE!
The saturate function also accepts values over 100%.

The hue-rotate Function
 

The hue-rotate function applies a hue rotation (based on the color circle) to an image.
The function takes an angle of rotation as its parameter. The value of angle defines the number of degrees around the color circle the input samples will be adjusted.

Holla Tech - Learn CSS3

When you use hue-rotate() to rotate the hue, you are rotating around this color circle.

If the image contains red color, which is at 0 degrees on the color circle, rotating the hue by 240deg will make the red color blue.

Here is an example of a hue rotation:

.filtered {
  filter: hue-rotate(180deg);
}

 

0 and 360deg rotations leave the image unchanged.


The invert Function
 

The invert function inverts the colors of an image to make dark areas bright and bright areas dark.
The function takes the proportion of the conversion as its parameter.

The parameter can be either a percentage value or a number.
0% invert leaves the image unchanged, whereas 100% creates a completely inverted image that is similar to a photographic negative.

Here is an example using a percentage value to make the image partially inverted:

.filtered {
  filter: invert(70%);
}

 

NOTE!
The specification allows values over 100%, but that will have no further effect on the image.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT