@coder 1217
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:
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?...
CSS3 RESPONSIVE UI...
How to host a web page in 10 minutes....
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
