Backdrop Grayscale In Tailwind CSS
In this article, we will explore the use of Tailwind Backdrop Grayscale class with examples. Tailwind enables developers to use the Backdrop Grayscale class in all web browsers.
In traditional CSS, the Backdrop Grayscale class is part of the Backdrop Filter module, which is a new module that is not yet supported by all browsers.
Tailwind Backdrop Grayscale
One of the many useful utility classes available in Tailwind is the Backdrop Contrast class.
A grayscale filter is applied to the image using the Backdrop Grayscale class.In Tailwind CSS version 2.1, this feature was added.
Syntax:
<element class="filter backdrop-grayscale | backdrop-grayscale-0"> </element>
Tailwind Backdrop Grayscale Classes
- backdrop-grayscale-0 – It is used to represent the original element without a grayscale filter. Its equivalent to backdrop-filter: grayscale(0).
- backdrop-grayscale – It is used to represent the original element with a 100% grayscale filter. Its equivalent to backdrop-filter: grayscale(100).
Tailwind Backdrop Grayscale Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 ">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-semibold">Backdrop Grayscale Class in Tailwind CSS</p>
<div class=" mx-16 mt-18 h-36 relative text-white">
<div class="absolute w-full py-18">
<img class="rounded-lg object-cover" src="https://miro.medium.com/max/644/1*d7Xs5RnaqcQtKzbNrAOAYA.png" alt="image">
</div>
<div class="relative h-36 flex overflow-x-auto space-x-4">
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-grayscale w-1/2">
backdrop-grayscale
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-grayscale-0 w-1/2">
backdrop-grayscale-0
</div>
</div>
</div>
</body>
</html>
Example Explanation
Here’s a breakdown of what each part does:
- The <!DOCTYPE html> declaration is used to tell the browser that this is an HTML document.
- The <html> element is the root element of the HTML document and contains all other elements.
- The <head> element contains meta information about the HTML document, such as the title of the page and any external resources that are used.
- The <script> element is used to include an external JavaScript resource in the HTML document. In this case, it’s a script that links to the Tailwind CSS library hosted on a CDN (content delivery network).
- The <body> element contains the visible content of the HTML document that is displayed in the browser.
- The class=”text-center mx-4″ attribute is applied to the <body> element, and it uses two Tailwind CSS classes to center align the text in the body and apply a margin of 4 on both the left and right sides of the body.
- The <h1> element is a heading element used to display a large heading on the page, and it’s given a class of “text-gray-600 text-2xl font-semibold“, which uses three Tailwind CSS classes to style the text color, font size, and font weight of the heading.
- The <p> element is a paragraph element used to display some text on the page, and it’s given a class of “my-2 font-semibold“, which uses two Tailwind CSS classes to apply a margin of 2 on both the top and bottom of the paragraph and set the font weight to bold.
- The <div> element is a container element used to group and style other elements, and it’s given a class of “mx-16 mt-18 h-36 relative text-white“, which uses four Tailwind CSS classes to apply a margin of 16 on both the left and right sides of the container, a margin of 18 on the top of the container, set the height of the container to 36, and set the text color of the container to white.
- Inside the <div> element, there are two child elements, both styled with Tailwind CSS classes to create a backdrop filter effect with a grayscale effect applied to the background image in the container.
- The first child <div> element is absolutely positioned to cover the entire parent container and contains an <img> element with a class of “rounded-lg object-cover” that displays an image from a URL.
- The second child <div> element is relatively positioned and contains two child <div> elements that are used to demonstrate the Tailwind CSS classes “backdrop-grayscale” and “backdrop-grayscale-0“, which create different levels of grayscale on the backdrop of the container.
- The container has a horizontal scrollbar due to the overflow-x-auto class, and its children are styled with Tailwind CSS classes to create a border and set their width to half of the container.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
