We will implement the several examples of these functions that the CSS filter property provides in an HTML file.
Example 1: Using the Filter Property with the Invert Function to Style an Image in an HTML File
In this example, we will use the filter property’s invert function which will invert all the sample values of an image. The invert function can accept all the positive values for the degree of inversion and only the negative values are not accepted. This function of the filter property can single-handedly change the color of an image.
In this script, we start by opening the header of the file to create a styling class for the image element of the HTML page. In the style under the name of “image”, we create a class where we define the property along with its function which changes the color of the image. Then, we close the style tag and the header of the file. After this, we open the body tag where we give a heading by using the “h2” tag. The first image is the original colored image and have no styling properties in it while the second image is the same as the first, but with the style and class added to its tag. We add the images in the file via the file path using the “src” keyword. After closing the image tag, we end the file by closing the body and the HTML tag. We save the file in the proper format so that we can access it in our browser and receive the following results:
As we can see in the previous output, the image on the left has all the correct colors while the image on the right has the inverted colors and has been transformed into a different image.
Example 2: Using the Filter Property with the Sepia Function to Style an Image in an HTML File
In this example, we use the sepia function of the filter property to change all of the colors in a picture to a warm brown or light yellow color. The sepia function accepts all the positive color conversion degree values and rejects only the negative values. This filter property function has the capacity to modify the color of a picture on its own. Inside the style tag of an HTML file, we will create a unique styling class for the image element.
In this script, we begin by accessing the file’s header to create a style class for the image element of the HTML page. In the style tag, we construct a class where we define the property as well as its method, which alters the color of the picture. The style tag and the file’s header will thereafter be closed. Following that, we open the body tag and insert a heading using the “h2” tag. Then, using the “img” element, we place the two images on our screen. The first image is the original color image with no style characteristics, whereas the second image is the same as the first but with the styling class included in its tag. Using the “src” keyword, we insert the photos into the file through the file path.
As shown in the previous output, the image on the left has all of the correct colors. However, the one on the right has the assorted colors.
Example 3: Using the Filter Property with the Grayscale Function to Style an Image in an HTML File
In this example, we will utilize the grayscale filter feature to convert all of the colors in a photo to black, white, and grey. This filter property function can alter a photograph’s color and transforms it into a grayscale picture. We will develop a unique styling class for the picture element within the style tag of an HTML file.
In this script, we first enter the file’s header to generate a style class for the HTML page’s image element. We define the property as well as the method to alter the color of the picture in a class. The style tag and the file’s header will thereafter be closed. Then, we open the body tag and insert a heading using the “h2” tag. Then, we use the “img” element to display the two images on our screen. The first image has no styling features, while the second image is the same as the first but with the styling class added to its tag. We insert the photographs into the file using the “src” keyword and the file path.
The picture on the left contains all of the original colors, as shown in the previous output. However, the one on the right has distinct hues.
Example 4: Using the Filter Property with the Opacity and Drop Shadow Functions to Style an Image in an HTML File
In this example, we will use the filter property’s opacity and drop shadow functions to change all of the colors in a photo. This filter property function alters the color of a photograph and converts it to a new image.
In this script, we first add the file’s header to produce a style class for the picture element on the HTML page. We define the property as well as the method to alter the color of the picture in a class. The style tag and the file’s header will thereafter be closed. Then, we open the body tag and use the “h2” tag to insert a heading. The “img” element is then used to display the two images on our screen. The first image has no styling characteristics, whereas the second image is identical to the first but with the styling class added to its tag. We insert pictures into the file by using the “src” keyword and the file path. We close the body and the HTML elements once we close the image tag.
The photo on the left contains all of the original colors, while the one on the right has changed tones, as indicated in the previous output.
Conclusion
We discussed the several methods regarding the changing of the color of an image in an HTML file using CSS. The most commonly used CSS property is the filter property which has predefined distinct functions which can change the color of an image and can give it a transformed look. We implemented several of these functions in the Notepad++ environment to get a better understanding of how this property works with distinct functions.
