Primer CSS Marketing Filters
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. It is highly reusable and flexible. It is created with GitHub’s design system.
Filters are used to change the overall background or colors of images. You must have used it while clicking photos on your phone to change the brightness contrast or whole color of your photos. A marketing filter is available in the Primer CSS to apply visual effects. Users can use them in div tags or images to turn them grayscale.
Marketing Filter Used Class:
- grayscale: Add the .grayscale class to apply the grayscale effect on the div tags or images.
Syntax:
<img src="#" class="grayscale"/>
Example 1: This example demonstrates the Primer CSS Marketing filters on a div using the grayscale class.
HTML
<!DOCTYPE html><html><head> <title>Primer CSS Marketing Filters</title> <link rel="stylesheet" href="https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/></head><body> <div class="text-center"> <h1 class="color-fg-success">GeeksforGeeks</h1> <h5 class="color-fg-success">Normal Div</h5> <br/> </div> <div class="text-center grayscale"> <h1 class="color-fg-success">GeeksforGeeks </h1> <h3><u>Primer CSS Marketing Filters</u></h3> <br/> <h5>Grayscale div</h5> <br/> </div></body></html> |
Output:
Grayscale div.
Example 2: This example demonstrates the Primer CSS Marketing filters on an image using the grayscale class.
HTML
<!DOCTYPE html><html><head> <title>Primer CSS Marketing Filters</title> <link rel="stylesheet" href="https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /></head><body> <div class="text-center"> <h1 class="color-fg-success">GeeksforGeeks </h1> <h3><u>Primer CSS Marketing Filters</u></h3><br/> <h5>Normal Image</h5><br/> <img src= <br/><br/> <h5>Grayscale filter applied</h5><br/> <img class="grayscale" src= </div></body></html> |
Output: You can see all the default colors of the image are removed and it has turned to grey as a filter has been applied.
Grayscale image.
Reference: https://primer.style/css/utilities/marketing-filters
Please Login to comment...