Images are important for every website because they give it life, and adding effect on these images is better.
in this small tutorial, we will speak about " filter ", we will see how to use it and what we can do with it.
Filters in CSS
a filter is a CSS property that allows us to add some effect on our images like blur, grayscale or sepia. we will see 10 principal value of filter and how to use them.
the 10 filters that we will see are :
- grayscale(%)
- sepia(%)
- blur(px)
- hue-rotate(deg)
- saturate(%)
- invert(%)
- contrast(%)
- brightness(%)
- drop-shadow(px px px color)
- opacity(%)
to use these filter it's simple we only have to add this piece of code
-webkit-filter: filter-name(value);
filter: filter-name(value);
and all what you have to do is to change filter-name by one of the filter shown below and pay attention to the unit of the value if it's in percentage keep it in percentage.
now let's see some example.
Video tutorial
HTML CODE
the HTML code is the same for every effect we will only change the CSS part
<!DOCTYPE HTML>
<html>
<head>
<title>10 Images effect in CSS</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<img src="https://images.unsplash.com/photo-1551334787-21e6bd3ab135?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80">
</body>
</html>
CSS part
this is CSS part is the same to every effect we will only change the hover part
body{
background-color: #fafafa;
}
img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 50%;
transition: .4s;
}
now let's see the effects one by one
1-grayscale
img:hover{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
2-sepia
img:hover{
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
3-blur
img:hover{
-webkit-filter: blur(5px);
filter: blur(5px);
}
4-hue-rotate
img:hover{
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
5-saturate
img:hover{
-webkit-filter: saturate(150%);
filter: saturate(150%);
}
6-invert
img:hover{
-webkit-filter:invert(100%);
filter: invert(100%);
}
7-contrast
img:hover{
-webkit-filter: contrast(150%);
filter: contrast(150%);
}
8-brightness
img:hover{
-webkit-filter: brightness(150%);
filter: brightness(150%);
}
9-drop-shadow
img:hover{
-webkit-filter: drop-shadow(8px 8px 10px black);
filter: drop-shadow(8px 8px 10px black);
}
1-opacity
img:hover{
-webkit-filter: opacity(50%);
filter: opacity(50%);
}
and that it you can try the source code and tell us what you think about it, and if you want to see more tutorial like this just tell us
How to Add Special effect to your image using only CSS
Reviewed by Medics
on
March 28, 2019
Rating:
Reviewed by Medics
on
March 28, 2019
Rating:
No comments: