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.
- Filtro CSS de viento de cola
- Desenfoque CSS de viento de cola
- Brillo CSS de Tailwind
- Contraste de CSS de viento de cola
- Sombra paralela CSS de viento a favor
- Tailwind CSS en escala de grises
- Tailwind CSS Tono Rotar
- Invertir CSS de viento de cola
- Tailwind CSS Saturar
- Viento de cola CSS Sepia
- Filtro de fondo CSS Tailwind
- Desenfoque de fondo CSS Tailwind
- Tailwind CSS Brillo de fondo
- Tailwind CSS Contraste de fondo
- Tailwind CSS Telón de fondo en escala de grises
- Tailwind CSS Fondo Tono Rotar
- Tailwind CSS Fondo Invertir
- Opacidad de fondo CSS Tailwind
- Tailwind CSS Telón de fondo Saturar
- Tailwind CSS Telón de fondo Sepia
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:
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