The Developer Brains


CSS3 FILTERS

Web Designing | Web Development


SEE MORE

download tdb school app from playstote
Download the App from Play Store













</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





Style_Sheets @Import_Rule Structure Box_Model Background_Image Media_Queries Fonts Box_Shadow FlexBox Grid Transition Animations 2D_Transform 3D_Transform Filter_Property Inheritance Vertical_Centering Responsive_UI CSS_Quiz



















</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










IMPORTANT PROPERTIES

OTHER PROPERTIES

LINKS

ABOUT US!

TDB School is a leading web developer's website. Here you will learn how to code amazing, modern, responsive, and attractive (static and dynamic) websites by using the latest web technologies. Learn Web Development in the easiest & smartest way. Start your journey from a beginner level to a professional level with the full support of our Expert Developer's Team.




Copyright © 2020 www.tdbschool.com
Powered by The Developer Brains