Filtro CSS de viento de cola

La clase de filtro se utiliza para establecer el efecto visual de un elemento. Esta clase se usa principalmente en contenido de imagen. En CSS, hacemos eso usando la propiedad de filtro CSS . Tailwind CSS filtro de características recién agregado en la versión 2.1.

Filtrar Clases: 

  • filtro: esta clase se utiliza para habilitar filtros.
  • filter-none: esta clase se utiliza para eliminar filtros.

Sintaxis:

<element class="filter">..</element>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^2.1/dist/tailwind.min.css"
        rel="stylesheet">
</head>
  
<body class="text-center mx-4 space-y-2">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Filter Class</b>
    <div class="grid grid-flow-col text-center p-4">
        <img class="rounded-lg filter brightness-50" 
          src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter invert" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter blur-lg" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter contrast-125" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter grayscale" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
          
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *