HOLLA TECH - LEARN

The opacity Function
 

The opacity function sets the opacity of an image to change its transparency.

0% opacity creates a completely transparent image, whereas 100% is the original image.
For 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 amount parameter determines the brightness level of the image. The parameter can take either a percentage value or a number.

A value of 0% results in an image that is completely black.
A value of 100% results in an image that is unchanged.
Any amount over 100% produces a brighter image.

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

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

 

NOTE!
A value under 100% darkens the image, while a value over 100% brightens it.

A number value of 0.5 has the same effect as the percentage value of 50%. A value of 1 is the same as 100%.

Here is an example using a number value to make the image brighter:

.filtered {
  filter: brightness(1.9);
}

 

NOTE!
Any negative value will make the image black.

The contrast Function
 

The contrast function adjusts the contrast of the image.
The amount parameter can take either a percentage value or a number.

A value under 100% decreases the contrast, while a value over 100% increases it.
A value of 0% will create an image that is completely gray, while a value of 100% leaves the image unchanged.
The value 0.5 corresponds to 50%, while 1 is the same as 100%.

Here is an example using a percentage value to give the image more contrast:

.filtered {
  filter: contrast(140%);
}

 

NOTE!
Any negative value leaves the image unchanged.

The blur Function
 

The blur function applies a blur effect to an image.
The blur function has only one parameter, radius, which defines how many pixels on the screen blend into each other. (a larger value creates more blur).
For example: 

.blured {
  filter: blur(5px);
}

 

NOTE!
The parameter is specified as a CSS length, but does not accept percentage values.

If no parameter is provided, then the default value 0 is used, which leaves the image unchanged.
For example:

.blur {
  /*  Both have no effect on the picture*/
  blur();  /* If no parameter is provided, then a value 0 is used.*/
  blur(0); /* A value of 0 leaves the input unchanged.*/
}

 


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