Brilho do pano de fundo no Tailwind CSS
Neste artigo, discutiremos e demonstraremos os casos de uso da classe Tailwind Backdrop Brightness .
Tailwind CSS permite que os desenvolvedores usem a classe Backdrop Brightness em todos os navegadores da web. O recurso de brilho foi introduzido no Tailwind CSS versão 2.1.
No CSS normal, a classe Backdrop Brightness faz parte do módulo Backdrop Filter, que é um novo módulo que ainda não é suportado por todos os navegadores.
Índice-
Brilho do pano de fundo do vento de cauda
Uma das muitas classes úteis disponíveis no Tailwind é a classe Backdrop Brightness .
Usando a classe de brilho do pano de fundo, o brilho de uma imagem pode ser ajustado.
Ele aumenta ou diminui o brilho usando um multiplicador linear.
Classes de brilho de pano de fundo Tailwind
- background-brightness-0 – O brilho de um elemento é definido como 0% do brilho padrão usando esta classe. Equivalente ao brilho do CSS (0).
- background-brightness-50 – O brilho de um elemento é definido como 50% do brilho padrão usando esta classe. Equivalente ao brilho do CSS (0,5).
- background-brightness-75 – O brilho de um elemento é definido para 75% do brilho padrão usando esta classe. Equivalente ao brilho do CSS (0,75).
- background-brightness-90 – O brilho de um elemento é definido para 90% do brilho padrão usando esta classe. Equivalente ao brilho do CSS (0,9).
- background-brightness-95 – O brilho de um elemento é definido como 95% do brilho padrão usando esta classe. Equivalente ao brilho do CSS (0,95).
- background-brightness-100 – O brilho de um elemento é definido como padrão usando esta classe. Equivalente ao brilho do CSS (1.0).
- background-brightness-105 – O brilho de um elemento é definido como 105% do brilho padrão usando esta classe. Equivalente ao brilho do CSS (1,05).
- background-brightness-110 – O brilho de um elemento é definido como 110% do brilho padrão usando esta classe. Equivalente ao brilho do CSS (1.10).
- background-brightness-125 – O brilho de um elemento é definido como 125% do brilho padrão usando esta classe. Equivalente ao brilho do CSS (1,25).
- background-brightness-150 – O brilho de um elemento é definido como 150% do brilho padrão usando esta classe. Equivalente ao brilho do CSS (1,50).
- background-brightness-200 – O brilho de um elemento é definido como 200% do brilho padrão usando esta classe. Equivalente ao brilho do CSS (2.0).
Sintaxe:
<element class="backdrop-filter backdrop-brightness-{amount}">
..
</element>
Tailwind Backdrop Brightness 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>
src="https://cdn.tailwindcss.com"
class="text-center mx-4 "
class="text-gray-600 text-2xl font-semibold m-2"
MrExamples
class="my-2 font-semibold"Backdrop Brightness Class in Tailwind CSS
class=" mx-16 mt-22 h-36 relative"
class="absolute w-full py-18"
class="rounded-lg object-cover" src="https://miro.medium.com/max/644/1*d7Xs5RnaqcQtKzbNrAOAYA.png" alt="image"
class="relative h-36 flex overflow-x-auto space-x-2 text-white text-sm"
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-50 w-1/4"
backdrop-brightness-50
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-90 w-1/4"
backdrop-brightness-90
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-110 w-1/4"
backdrop-brightness-110
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-200 w-1/4"
backdrop-brightness-200
Tailwind Backdrop Brightness 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>
src="https://cdn.tailwindcss.com"
class="text-center mx-4 "
class="text-gray-600 text-2xl font-semibold m-2"
MrExamples
class="my-2 font-semibold"Backdrop Brightness Class in Tailwind CSS
class=" mx-16 mt-22 h-36 relative"
class="absolute w-full py-18"
class="rounded-lg object-cover" src="https://miro.medium.com/max/644/1*d7Xs5RnaqcQtKzbNrAOAYA.png" alt="image"
class="relative h-36 flex overflow-x-auto space-x-2 text-white text-sm"
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-0 w-1/4"
backdrop-brightness-0
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-95 w-1/4"
backdrop-brightness-95
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-105 w-1/4"
backdrop-brightness-105
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-125 w-1/4"
backdrop-brightness-125
Tailwind Backdrop Brightness Example: 3
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
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="text-center mx-4 "
class="text-gray-600 text-2xl font-semibold m-2"
MrExamples
class="my-2 font-semibold"Backdrop Brightness Class in Tailwind CSS
class=" mx-16 mt-22 h-36 relative"
class="absolute w-full py-18"
class="rounded-lg object-cover" src="https://miro.medium.com/max/644/1*d7Xs5RnaqcQtKzbNrAOAYA.png" alt="image"
class="relative h-32 flex overflow-x-auto space-x-2 text-white text-sm"
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-75 w-1/4"
backdrop-brightness-75
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-100 w-1/4"
backdrop-brightness-100
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-150 w-1/4"
backdrop-brightness-150
Exemplo de Explicação
No exemplo acima, estamos usando a propriedade “ background-brightness ” para ajustar o brilho da área atrás de um elemento.
O código começa com a declaração de um doctype para HTML5 e, em seguida, 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 três elementos filho, cada um com diferentes classes Tailwind CSS aplicadas.
- Essas classes usam a propriedade “backdrop-filter” para aplicar um efeito de brilho à imagem de fundo.
- Os elementos filho têm diferentes valores de brilho aplicados usando a propriedade “ background-brightness ” com valores diferentes ( 75, 100, 150 ), resultando em uma gama de diferentes níveis de brilho.
No geral, os exemplos acima demonstram como usar a classe Tailwind Backdrop Brightness para ajustar o brilho da área atrás de um elemento HTML, criando um design visualmente atraente.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
