Tailwind CSS Filters Referencia completa

Tailwind CSS es un marco CSS de bajo nivel altamente personalizable que le brinda todos los componentes básicos que necesita. Tailwind CSS Filters aplica efectos gráficos como filtros, desenfoque, brillo, contraste, sombra paralela, etc. a un elemento. Estas clases se utilizan principalmente en contenido de imagen.

El siguiente ejemplo le dará una breve idea sobre los filtros de Tailwind CSS:

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:

Filtros CSS de viento de cola

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta