Guia rápido para a escala de cinza do Tailwind

O objetivo deste artigo é apresentar o filtro de escala de cinza Tailwind .

Esta classe é usada para definir a escala de cinza da imagem que define a porcentagem da cor original da imagem que deve ser exibida.

Escala de cinza do vento de cauda

Em uma imagem em escala de cinza, os valores de cor variam de preto (sem luz) a branco (máxima luz), com tons de cinza intermediários. Muitas vezes, é incorporado ao design visual e à fotografia para transmitir uma sensação de simplicidade, neutralidade ou atemporalidade.

Índice-

Guia rápido para a escala de cinza do Tailwind:
- Classes de escala de cinza do Tailwind:

Classes em escala de cinza do Tailwind

Aulas	Visão geral
tons de cinza-0	O efeito de escala de cinza não é aplicado e a imagem original é exibida.
escala de cinza	Essa classe converte a imagem em uma imagem completamente em tons de cinza.

Sintaxe

<element class="grayscale-0">..</element>

<element class="grayscale">..</element>

Este exemplo aplica as classes utilitárias do filtro de escala de cinza em uma imagem para demonstração:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
 <h1 class="text-gray-600 text-2xl font-semibold">
  MrExamples
 </h1>
 <p class="font-medium my-4">Grayscale Class in Tailwind CSS</p>
 <div class="flex justify-evenly w-full text-center mt-8">
  <div>
  <img class="rounded-lg grayscale w-32 border" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image">
  <p class="font-medium">grayscale</p>
 </div>
 <div>
  <img class="rounded-lg grayscale-0 w-32 border" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image">
  <p class="font-medium">grayscale-0</p>
 </div>
 </div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Neste exemplo, as classes de filtro de escala de cinza do Tailwind foram invocadas em uma imagem:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
 <h1 class="text-gray-600 text-2xl font-semibold">
  MrExamples
 </h1>
 <p class="font-medium my-4">Grayscale Class in Tailwind CSS</p>
 <div class="flex justify-evenly w-full text-center mt-8">
  <div>
  <img class="rounded-lg grayscale w-32 border" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind1.webp" alt="image">
  <p class="font-medium">grayscale</p>
 </div>
 <div>
  <img class="rounded-lg grayscale-0 w-32 border" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind1.webp" alt="image">
  <p class="font-medium">grayscale-0</p>
 </div>
 </div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Conclusão

A escala de cinza é um poderoso elemento de design que pode ser usado para criar designs elegantes e sofisticados .

Tailwind CSS fornece aos desenvolvedores um conjunto abrangente de utilitários em escala de cinza que podem ser usados para ajustar a cor de um elemento de forma rápida e fácil. Com uma convenção de nomenclatura simples e uma variedade de tons, Tailwind CSS torna mais fácil para os desenvolvedores criar designs impressionantes em escala de cinza.

Nós valorizamos o seu feedback.

Guia rápido para a escala de cinza do Tailwind

Classes em escala de cinza do Tailwind

Sintaxe

Example:

Example:

Conclusão

Sentindo entediado?