Desfoque de pano de fundo no Tailwind CSS

Neste artigo, discutiremos e demonstraremos os casos de uso da classe Tailwind Backdrop Blur .

O recurso de desfoque foi introduzido no Tailwind CSS versão 2.1. No CSS normal, a classe Backdrop Blur faz parte do módulo Backdrop Filter, que é um novo módulo que ainda não é suportado por todos os navegadores.

No entanto, Tailwind CSS permite que os desenvolvedores usem a classe Backdrop Blur em todos os navegadores da web.

Índice-

Desfoque de pano de fundo no Tailwind CSS:
- Desfoque de pano de fundo do vento de cauda:
- Exemplo de Explicação:

Desfoque de pano de fundo com vento de cauda

Uma das muitas classes utilitárias úteis disponíveis no Tailwind é a classe Backdrop Blur .

Usando a classe de desfoque de pano de fundo, você pode aplicar um filtro de efeito de desfoque a um elemento.

Efeitos visualmente atraentes como esse podem ajudar a chamar a atenção dos usuários para partes específicas de uma página da web.

Classes de desfoque de fundo do Tailwind:

background-blur-0 – Esta classe corresponde a blur(0) em elementos sem efeito de desfoque.
background-blur-sm – Esta classe corresponde a blur( 4px ) em elementos com um pequeno efeito de blur.
background-blur – Esta classe corresponde a blur( 8px ) em elementos com um efeito de blur normal.
background-blur-md – Esta classe corresponde a blur( 12px ) em elementos com um efeito de desfoque médio.
background-blur-lg – Esta classe corresponde a blur( 16px ) em elementos com um grande efeito de desfoque.
background-blur-xl – Esta classe corresponde a blur( 24px ) em elementos com um efeito de blur extra grande.
background-blur-2xl – Esta classe corresponde a blur( 40px ) em elementos com um duplo efeito de blur extra grande.
background-blur-3xl – Esta classe corresponde ao desfoque ( 64px ) em elementos com um efeito de desfoque extra grande triplo.

Sintaxe:

<element class="filter backdrop-blur-{amount}">..</element>

Tailwind Backdrop Blur Example: 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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">Backdrop Blur Class in Tailwind CSS</p>
 <div class=" mx-16 mt-18 h-36 relative">
 <div class="absolute w-full h-full py-18">
 <img class="rounded-lg w-full h-full 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-2  text-white text-sm">
   <div class="flex-shrink-0 border-2 border-gray-500
   backdrop-filter backdrop-blur-0 w-1/4">
      backdrop-blur-0
 </div>
 <div class="flex-shrink-0 border-2 border-gray-500
   backdrop-filter backdrop-blur-sm w-1/4">
    backdrop-blur-sm
 </div>
 <div class="flex-shrink-0 border-2 border-gray-500
   backdrop-filter backdrop-blur w-1/4">
    backdrop-blur
 </div>
 <div class="flex-shrink-0 border-2 border-gray-500
   backdrop-filter backdrop-blur-md w-1/4">
    backdrop-blur-md
 </div>
 </div>
 </div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exemplo de Explicação:

O exemplo acima começa com a declaração de um doctype para HTML5 e então define um documento HTML que contém uma seção de cabeçalho e uma seção de corpo.

Na seção head , um link para um arquivo de script em uma CDN (rede de entrega de conteúdo) está incluído. Este arquivo de script fornece acesso à estrutura CSS do Tailwind.

Na seção do corpo , são definidos um cabeçalho , um parágrafo e um contêiner com uma imagem de fundo.

O contêiner inclui um conjunto de quatro elementos filho , cada um com diferentes classes Tailwind CSS aplicadas. Essas classes usam a propriedade “backdrop-filter”, que é uma propriedade de filtro CSS que aplica um efeito de filtro à área atrás de um elemento.

Nesse caso, ele está sendo usado para aplicar um efeito de desfoque à imagem de fundo.

Os elementos filho têm diferentes efeitos de desfoque aplicados usando a propriedade “ background-blur ” com valores diferentes ( 0 , sm , md ), resultando em uma gama de diferentes intensidades de desfoque.

Tailwind Backdrop Blur Example: 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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">Backdrop Blur Class in Tailwind CSS</p>
 <div class=" mx-16 mt-18 h-36 relative">
 <div class="absolute w-full h-full py-18">
 <img class="rounded-lg w-full h-full 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-2  text-white text-sm">
   <div class="flex-shrink-0 border-2 border-gray-500
   backdrop-filter backdrop-blur-lg w-1/4">
      backdrop-blur-lg
 </div>
 <div class="flex-shrink-0 border-2 border-gray-500
   backdrop-filter backdrop-blur-xl w-1/4">
    backdrop-blur-xl
 </div>
 <div class="flex-shrink-0 border-2 border-gray-500
   backdrop-filter backdrop-blur-2xl w-1/4">
    backdrop-blur-2xl
 </div>
 <div class="flex-shrink-0 border-2 border-gray-500
   backdrop-filter backdrop-blur-3xl w-1/4">
    backdrop-blur-3xl
 </div>
 </div>
 </div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Nós valorizamos o seu feedback.