The Developer Brains


CSS3 FILTERS

Web Designing | Web Development


SEE MORE














</CSS3 FILTER PROPERTY>





The CSS3 filter property is a latest CSS property which is used for applying different types of filters on images for giving them attractive looks.


SEE MORE
























</Use of Filter property>


How to use filters on an image file?

Here are some values of CSS3 filter property for applying on images
  • grayscale() function
    grayscale function is used to give black and white effect to a images file.

<style>
/*example*/
.tdb-image{
  filter: grayscale(80%);
}
</style>

  • CSS3 Filter property syntax
    We have many inbuilt filter functions, that we can apply on images for giving them different looks.

<style>
/*example*/
filter: none | brightness() | blur()  | contrast() 
| drop-shadow() | sepia() | grayscale() | hue-rotate() 
| invert() | opacity() | saturate() 
| url();

</style>


  • Note
    If you want to use multiple filter you can use multiple space saparated values.


	

<head>
	<style>
	/*black & white image*/
.tdb-image{
  filter: grayscale(100%);
  width:100px;
}
/*blur image */
.tdb-image1{
  filter: blur(5px);
  width:100px;
}
	</style>
</head>

<body>
	<div>
<img  class="tdb-image" 
src="js.png" alt="sample image">
<br>
<img  class="tdb-image1" 
src="js.png" alt="sample image">
	</div>
	
</body>




Try it Yourself









Different Filter Functions

  • bulr() function
    blur() function uses px value as an attribute and it is used to give blur effect to the image.

<style>
img{
filter: blur(5px);
}
</style>

  • none value
    default value of filter property.
  • contrast(%) function
    contrast() function is used to adjust the contrast on the image.

<style>
img{
filter: contrast(50%);
}
/*default value:100% | (1)*/
</style>

  • other functions
    • grayscale(%)
    • drop-shadow(h-shadow v-shadow blur spread color-value)
    • opacity(%)
    • hue-rotate(deg)
    • invert(%)
    • url()
    • saturate(%)
    • sepia(%)
    initial | inherit


















Choose correct syntax

1. filter: blur(20vh);
2. filter: blur(1%);
3. filter: blur(2px);




Check Now



CSS3 QUIZ







Next: CSS3 Cursor


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers