FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/css3.jpg


@coder 1084

CSS3 FILTERS


2021-11-17 00:06 · 4 min read

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

 

How to use filters on an image file?

Here are some values of the CSS3 filter property for applying to images

  • grayscale() function
    the grayscale function is used to give a black and white effect to an images file.
<style>
/*example*/
.tdb-image{
filter: grayscale(80%);
}
</style>
  • CSS3 Filter property syntax
    We have many inbuilt filter functions, that we can apply to 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>

 

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(%)


 

TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer