Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Understanding the CSS3 Filter Functions
The filter functions are used to set visual effects on elements like contrast, brightness, hue rotation, opacity, on images, etc. Let us now see some filter functions.
Syntax
The following is the syntax of the filter in CSS −
filter: none | drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
As you can see above, with the filter property, we can set the following effects: blur, contrast, drop shadow, blur, brightness, grayscale, hue-rotate, invert, opacity, saturate, sepia, url.
Invert
The invert() is used to invert the samples in an image. Here, 0% (0) is the actual image whereas the value 100% will make the invert the image completely. To invert an image in CSS3, use the invert() for the filter property.
Example
Let us see an example to add a visual effect to images with invert −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img{
margin: 20px;
}
img.normal{
width: 300px;
height: 300px;
}
img.filter {
width: 300px;
height: 300px;
filter: invert(100%);
}
</style>
</head>
<body>
<h1>CSS Image effects example</h1>
<img class="normal" src="https://www.tutorialspoint.com/python/images/python-mini-logo.jpg">
<img class="filter" src="https://www.tutorialspoint.com/python/images/python-mini-logo.jpg">
</body>
</html>
Contrast
To set image contrast in CSS, use filter contrast(%). Remember, the value 0 makes the image black, 100% is for original image and default. Rest, you can set any value of your choice, but values above 100% would make the image with more contrast.
Example
Let us now see an example to adjust image contrast with CSS3 −
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<p>Below image is brighter and has more contrast than the original image above.</p>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
Blur
The filter property is used to set visual effects, such as blurr, drop shadow, contrast, brightness, saturation, shadow to images in CSS. We will see how to create a blurry image. The blur is used to blur an image. To set the blur effect in CSS3, use the blur value for filter property:. The larger the value, the more blur it will be.
Example
The following is the code to create a blurry background image with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100vh;
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
.backgroundImage {
background-image: url("https://images.pexels.com/photos/1172207/pexels-photo-1172207.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
filter: blur(10px);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.transparentText {
background-color: rgba(0, 0, 0, 0.4);
color: white;
border: 3px solid #f1f1f1;
position: absolute;
top: 40%;
left: 30%;
width: 50%;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="backgroundImage"></div>
<div class="transparentText">
<h1>I am Amit</h1>
<h1>I am an Entrepreneur</h1>
</div>
</body>
</html>
Drop Shadow
To add drop shadow to image in CSS3, use the drop-shadow value for filter property. It has the following values −
h-shadow − To specify a pixel value for the horizontal shadow.
v-shadow − To specify a pixel value for the vertical shadow. Negative values place the shadow above the image.
blur − To add a blur effect to the shadow.
spread − Positive values causes the shadow to expand and negative to shrink.
color − To add color to the shadow
Example
Let us now see an example −
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
filter: drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
Sepia Effect
To apply sepia effect to images using CSS3, use the sepia value for filter property. The code is as follows −
Example
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: sepia(100%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>
Hue Rotation
The hue rotation adjusts i.e., increase, or decrease the image hue value. To set the hue rotation of an image in CSS3, use the hue-rotate value for filter property. The hue rotation is set with a degree value i.e.
Actual Image − 0 deg i.e., default
Rotate 30 degrees − 30 deg
Rotate 90 degrees− 90 deg, etc.
Positive hue rotate − Increases the hue value
Negative hue rotate − Decreases the hue value
Example
Let us now see an example to apply hue rotation with CSS3. We will set 45 degrees with hue rotation −
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: hue-rotate(45deg);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>
75 Views
