What is Css functions

What is Css functions

How to build filters in Css

Let’s learn how to combine contrast, brightness and saturation to build unique filters for images.

CssFliters

=> Setting filters property to brightness (100%) changes how bright an image is, where (100%) is the image’s brightness default.

img { 

  filter: brightness (100%);
  width: 250px;
}

// => The lower the brightness, the darker the image 

=> Setting filter to saturate ( ) adjust how vivid the color are. Make the image less colourful by coding saturate ( 50% ).

img { 
  filter: saturate (50%);
  }

=> Setting the filter to contrast ( ) adjust the difference between light and dark parts of the image.

We can add multiple functions to filter, by coding them one after others.

img { 
 filter: saturate (70%) brightness (90%) contrast (85%);
 width: 350px;
 height: 300px;
  }
// 

For exaggerated effects we can set brightness, saturation and contrast to value over 100%.

Customising gradients

As you see in the picture to customise a background property of and element, we set background to linear-gradient ( ) function.

body {

  background:  linear-gradient ( );
  padding: 40px;
  }

// To gradually change the background from to to bottom place color inside the parentheses.

body {

  background:  linear-gradient (sandyBron, saddleBrow);
  padding: 40px;
  }

// We can add more color to mix by separating them with a comma (,)


h1 {

 background:  linear-gradient (lightCyan, skyBlue, deepSkyBlue);
 padding: 40px;
 }

To rotate a gradient by 90 degree for left to right place 90 deg before color.

p {

 background:  linear-gradient ( 90deg, lightCyan, skyBlue, deepSkyBlue);
 filter: saturate (75%);
 padding: 40px;
 }

=> The direction of gradient goes clockwise from 0 deg to 360 deg.

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow by Email
LinkedIn
LinkedIn
Share
Instagram
error: Content is protected !!