Brilho no Tailwind CSS
Neste artigo, apresentaremos uma breve visão geral da classe de brilho Tailwind com exemplos.
No Tailwind Css , a classe de brilho é usada para ajustar o brilho de uma imagem.
O brilho de uma imagem é ajustado usando um multiplicador linear que aumenta ou diminui o brilho dependendo do valor.
Em CSS, conseguimos isso usando a função CSS brilho().
Esse recurso foi introduzido na versão 2.1 do Tailwind.
Sintaxe
<element class="filter brightness-{amount}">....</element>
Classes de brilho do vento de cauda
| Aulas | Visão geral |
| brilho-0 | Esta classe aplica os mesmos estilos do CSS brilho(0). |
| brilho-50 | Essa classe é semelhante em funcionalidade ao brilho do CSS (0,5). |
| brilho-75 | O brilho é equivalente ao brilho do CSS (0,75). |
| brilho-90 | Esta classe usada para definir o brilho equivalente ao brilho do CSS (0,9). |
| brilho-95 | Esta classe define o brilho igual ao brilho do CSS (0,95). |
| brilho-100 | Este é o valor padrão. Equivalente ao brilho do CSS (1.0). |
| brilho-105 | Esta classe é usada para definir o brilho de um elemento. Aplica os mesmos estilos do brilho do CSS (1.05). |
| brilho-110 | Usando esta classe, o brilho é equivalente ao brilho do CSS (1.10). |
| brilho-125 | Essa classe é semelhante em funcionalidade ao brilho do CSS (1.25). |
| brilho-150 | É equivalente ao brilho do CSS (1,50). |
| brilho-200 | O brilho é o dobro do valor padrão. No CSS normal, é igual ao brilho do CSS (2.0). |
Veja a seguir um exemplo de como as classes de brilho são implementadas no Tailwind:
Example:
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
37
38
39
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="text-center mx-4 space-y-2"
class="text-gray-600 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Brightness Class in Tailwind CSS
class="grid grid-rows-2 grid-flow-col text-start p-4 bg-gray-300 rounded-md"
class="my-2"
brightness-0
class="rounded-lg w-24 brightness-0 mt-1" title="brightness-0" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image"
class="my-2"
brightness-75
class="rounded-lg w-24 brightness-75 mt-1" title="brightness-75" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image"
class="my-2"
brightness-95
class="rounded-lg w-24 brightness-95 mt-1" title="brightness-95" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image"
class="my-2"
brightness-105
class="rounded-lg w-24 brightness-105 mt-1" title="brightness-105" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image"
class="my-2"
brightness-125
class="rounded-lg w-24 brightness-125 mt-1" title="brightness-125" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image"
class="my-2"
brightness-200
class="rounded-lg w-24 brightness-200 mt-1" title="brightness-200" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image"
As classes de brilho restantes são abordadas no exemplo abaixo:
Example:
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
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="text-center mx-4 space-y-2"
class="text-gray-600 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Brightness Class in Tailwind CSS
class="grid grid-rows-2 grid-flow-col text-start p-4 bg-gray-300 rounded-md"
class="my-2"
brightness-50
class="rounded-lg w-24 brightness-50 mt-1" title="brightness-50" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image"
class="my-2"
brightness-90
class="rounded-lg w-24 brightness-90 mt-1" title="brightness-90" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image"
class="my-2"
brightness-100
class="rounded-lg w-24 brightness-100 mt-1" title="brightness-100" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image"
class="my-2"
brightness-110
class="rounded-lg w-24 brightness-110 mt-1" title="brightness-110" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image"
class="my-2"
brightness-150
class="rounded-lg w-24 brightness-150 mt-1" title="brightness-150" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image"
Agora que você sabe o que é o brilho do Tailwind , pode usá-lo para criar seu próprio site .
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
