Desenfoque CSS de viento de cola

La clase de desenfoque se utiliza para aplicar un filtro de efecto borroso en la imagen. En CSS, lo hacemos usando la función CSS blur() . Tailwind CSS recién agregado desenfoque de funciones en la versión 2.1.

Difuminar:

blur-0: esta clase es equivalente a ningún efecto de desenfoque como blur(0) en CSS.
blur-sm: esta clase es equivalente al efecto de desenfoque pequeño como desenfoque (4px) en CSS.
desenfoque: esta clase es equivalente al efecto de desenfoque normal como desenfoque (8px) en CSS.
blur-md: esta clase es equivalente al efecto de desenfoque medio como desenfoque (12px) en CSS.
blur-lg: esta clase es equivalente al gran efecto de desenfoque como blur(16px) en CSS.
blur-xl: esta clase es equivalente al efecto de desenfoque extra grande como desenfoque (24px) en CSS.
blur-2xl: esta clase es equivalente al doble efecto de desenfoque extra grande como desenfoque (40px) en CSS.
blur-3xl: esta clase es equivalente al triple efecto de desenfoque extra grande como desenfoque (64px) en CSS.

Sintaxis:

<element class="filter blur-{amount}">..</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 Blur Class</b>
    <div class="grid grid-flow-col text-center p-4">
        <img class="rounded-lg filter blur-0" 
          src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter blur-sm" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter blur-md" 
             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 blur-xl" 
             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

HTML

Deja una respuesta Cancelar la respuesta