Tailwind Saturar

Neste artigo, veremos mais de perto a propriedade Tailwind Saturate e suas classes com exemplos – também discutiremos seus benefícios.

Tailwind Saturar

O que é Tailwind Saturado?

Tailwind Saturate é uma classe que permite controlar a saturação das cores em seu design.

A saturação refere-se à intensidade de uma cor. Uma cor totalmente saturada é brilhante e vívida, enquanto uma cor dessaturada é mais suave e suave.

Usando as classes Tailwind CSS Saturate, você pode ajustar a saturação das cores em seu design para criar uma aparência única e visualmente atraente.



Tailwind Saturar Classes

Tailwind Saturate fornece uma variedade de classes predefinidas que permitem ajustar a saturação das cores em seu design.

Aqui estão algumas das principais classes:

Aulas Visão geral
saturar-0 Esta classe usada para remover qualquer efeito de saturação de um elemento.
saturar-50 Isso aplica um efeito de saturação de 50% que é equivalente a CSS saturate(50).
saturar-100 Aplica um efeito de saturação de 100%, equivalente a CSS saturate(100).
saturar-150 Usando esta classe, um efeito de saturação de 150% é aplicado a um elemento. Equivalente a CSS saturate(150).
saturar-200 Nesse caso, o efeito de saturação aplicado a um elemento é de 200%. Semelhante ao CSS saturate(200).

Sintaxe

<element class="saturate-100">..</element>

Aqui está um breve exemplo das classes saturate-0 , saturate-100 e saturate-200 em açã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
24
25
26
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Saturate class in Tailwind CSS</p>
<div class="grid grid-flow-row text-center p-4 gap-3 font-medium">
<div class="flex justify-evenly items-center">
<p>saturate-0:</p>
<img class="rounded-lg h-28 saturate-0" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind1.webp" alt="image">
</div>
<div class="flex justify-evenly items-center">
<p>saturate-100:</p>
<img class="rounded-lg h-28 saturate-100" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind1.webp" alt="image">
</div>
<div class="flex justify-evenly items-center">
<p>saturate-200:</p>
<img class="rounded-lg h-28 saturate-200" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind1.webp" alt="image">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Importância do Tailwind Saturate

Tailwind Saturate é uma importante classe utilitária na estrutura Tailwind CSS porque permite ajustar a saturação das cores em seu design de forma rápida e fácil.
A saturação é um aspecto importante da cor que pode afetar o humor e o tom do seu site ou aplicativo.
Você pode criar uma aparência única e visualmente atraente para seu site ou aplicativo que reflita sua marca.
Vejamos as classes saturate-50 e saturate-150 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
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Saturate class in Tailwind CSS</p>
<div class="grid grid-flow-row text-center p-4 gap-3 font-medium">
<div class="flex justify-evenly items-center">
<p>saturate-50:</p>
<img class="rounded-lg h-28 saturate-50" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind1.webp" alt="image">
</div>
<div class="flex justify-evenly items-center">
<p>saturate-150:</p>
<img class="rounded-lg h-28 saturate-150" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind1.webp" alt="image">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Benefícios do Tailwind CSS Saturate

Aqui estão alguns dos principais benefícios do uso do Tailwind Saturate em seus projetos de desenvolvimento web:

  • Ao ajustar a saturação das cores em seu design, você pode criar uma aparência única e visualmente atraente para seu site ou aplicativo.
  • O Tailwind Saturate fornece classes predefinidas que facilitam o ajuste da saturação das cores em seu design sem a necessidade de escrever CSS personalizado.
  • Se precisar de mais controle sobre a saturação das cores em seu design, você pode usar CSS personalizado para ajustar a saturação às suas necessidades específicas.
  • Tailwind Saturate faz parte do grupo de classes de utilitários Color, que inclui outros utilitários para ajustar a cor do texto, planos de fundo, bordas e muito mais. Usando essas classes juntas, você pode criar esquemas de cores complexos e dinâmicos para seu site ou aplicativo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone