CSS3 Filters, TutorialsPoint, CSS3 Filters Tutorial

CSS3 Tutorial

CSS3 Filters

The CSS3 filter effects provide an easy way to apply the visual effect to the images. The CSS3 filter properties are:

1. blur() : Blur effect can be applied to an element using the blur() function.

2. brightness() : The brightness() function can be used to set the brightness of an image.

3. contrast() : The contrast() function is used to adjust the contrast on an image.

4. drop-shadow() : The drop-shadow() function to apply the drop shadow effect to the images like Photoshop.

5. grayscale() : The images can be converted to grayscale using the grayscale() function.

6. hue-rotate() : The hue-rotate() function applies a hue rotation on the image.

7. invert() : The invert effect like Photoshop can be applied to an image with the invert() function.

8. opacity() : The opacity() function can be used to apply transparency to the images.

9. sepia() : The sepia() function converts the image to sepia. A value of 100% or 1 is completely sepia.

10. saturate() : The saturate() function can be used to adjust the saturaion of an image.

Blur Filter

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Blur Filter</title>

<style type="text/css">
img.blur { 
-webkit-filter: blur(2px); 
filter: blur(2px); 
border-radius:100px; 
}
img.extra-blur { 
-webkit-filter: blur(5px);   
filter: blur(5px); 
border-radius:100px; 
}
table td{ 
padding: 10px; 
text-align: center; 
}
</style>

</head>
<body>

    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="blur" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="extra-blur" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>

</body>
</html>

Output :

Brightness Filter

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Brightness Filter</title>

<style type="text/css">

.img_bright { 
-webkit-filter: brightness(200%);  
filter: brightness(200%);
 border-radius:100px;
}
.img_dark { 
-webkit-filter: brightness(50%);  
filter: brightness(50%); 
border-radius:100px;
}
 
table td{ padding: 10px; text-align: center; }

</style>

</head>
<body>

    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_bright" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_dark" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>

</body>
</html>

Output :

Contrast Filter

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Contrast Filter</title>

<style type="text/css">

.img_contrast {  
-webkit-filter: contrast(200%); 
filter: contrast(200%); 
border-radius:100px;}
.img_contrast_dim{ -webkit-filter: contrast(50%);  
filter: contrast(50%); border-radius:100px;
}
 
table td{ padding: 10px; text-align: center; }

</style>

</head>
<body>
    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_contrast" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_contrast_dim" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>
</body>
</html>

Output :

Drop-Shadow Filter

	
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Drop Shadow Filter</title>
 
<style type="text/css">
 
.img_drop_shadow {  
-webkit-filter: drop-shadow(2px 2px 4px #666); 
filter: drop-shadow(2px 2px 4px #666);
border-radius:100px;
}
.img_drop_shadow_large { 
-webkit-filter: drop-shadow(4px 4px 10px #666); 
filter: drop-shadow(4px 4px 10px #666); 
border-radius:100px;
}
 
table td{ padding: 10px; text-align: center; }
 
</style>
</head>
<body>
 
    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_drop_shadow" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_drop_shadow_large" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>
    
</body>
</html>

Output :

Grayscale Filter

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Grayscale Filter</title>
 
<style type="text/css">
 
.img_complete_gray { 
-webkit-filter: grayscale(100%); 
filter: grayscale(100%); 
border-radius:100px;
}
.img_partial_gray {
-webkit-filter: grayscale(50%);  
filter: grayscale(50%); 
border-radius:100px;
}
 
table td{ padding: 10px; text-align: center; }
 
</style>
</head>
<body>
 
    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_complete_gray" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_partial_gray" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>
    
</body>
</html>

Output :

Hue Rotation Filter

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Hue Rotatation Filter</title>
 
<style type="text/css">
 
.img_hue_normal {  
-webkit-filter: hue-rotate(150deg); 
filter: hue-rotate(150deg); 
border-radius:100px;
}
.img_hue_wrap { 
-webkit-filter: hue-rotate(480deg);  
filter: hue-rotate(480deg);
border-radius:100px;
}
 
table td{ padding: 10px; text-align: center; }
 
</style>
</head>
<body>
 
    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_hue_normal" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_hue_wrap" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>
    
</body>
</html>

Output :

Invert Filter

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Invert Filter</title>
 
<style type="text/css">
 
.img_partially_inverted { 
-webkit-filter: invert(80%);   
filter: invert(80%); 
border-radius:100px;
}
.img_fully_inverted { 
-webkit-filter: invert(100%);  
filter: invert(100%); 
border-radius:100px;
}
 
table td{ padding: 10px; text-align: center; }
 
</style>
</head>
<body>
 
    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_partially_inverted" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_fully_inverted" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>
    
</body>
</html>

Output :

Opacity Filter

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Opacity Filter</title>
 
<style type="text/css">
 
.img_opacity { 
-webkit-filter: opacity(80%);
 filter: opacity(80%); 
border-radius:100px;
}
.img_opacity_1{ 
-webkit-filter: opacity(30%); 
filter: opacity(30%);
border-radius:100px;
}
table td{ padding: 10px; text-align: center; }
 
</style>
</head>
<body>
 
    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_opacity" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_opacity_1" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>
    
</body>
</html>

Output :

Sepia Filter

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Sepia Filter</title>
 
<style type="text/css">
 
.img_complete_sepia { 
-webkit-filter: sepia(100%);  
filter: sepia(100%); 
border-radius:100px;
}
.img_partial_sepia { 
-webkit-filter: sepia(30%); 
filter: sepia(30%); 
border-radius:100px;
}
table td{ padding: 10px; text-align: center; }
 
</style>
</head>
<body>
 
    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_complete_sepia" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_partial_sepia" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>
    
</body>
</html>

Output :

Saturated Filter

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Saturated Filter</title>
 
<style type="text/css">
 
.img_un_saturated { 
-webkit-filter: saturate(0%); 
filter: saturate(0%); 
border-radius:100px; 
}
.img_super_saturated { 
-webkit-filter: saturate(200%); 
filter: saturate(200%); 
border-radius:100px; 
}
 
 table td{ padding: 10px; text-align: center; }
 
</style>
</head>
<body>
 
    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_un_saturated" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_super_saturated" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>
    
</body>
</html>

Output :

CSS3 Tutorial

S/W RELATED LINKS

Practice Templates
Practice(PHP) Projects
Quiz (OR) MCQ
Interview Questions
- Computer Science
- Civil Engineering

COMPETITIVE EXAMS