Pano de fundo em tons de cinza no Tailwind CSS
Neste artigo, exploraremos o uso da classe Tailwind Backdrop Grayscale com exemplos . O Tailwind permite que os desenvolvedores usem a classe Backdrop Grayscale em todos os navegadores da web.
No CSS tradicional, a classe Backdrop Grayscale faz parte do módulo Backdrop Filter, que é um novo módulo que ainda não é suportado por todos os navegadores.
Contexto do vento de cauda em tons de cinza
Uma das muitas classes utilitárias úteis disponíveis no Tailwind é a classe Backdrop Contrast.
Um filtro de tons de cinza é aplicado à imagem usando a classe Backdrop Grayscale. No Tailwind CSS versão 2.1, esse recurso foi adicionado.
Sintaxe:
<element class="filter backdrop-grayscale | backdrop-grayscale-0"> </element>
Classes de escala de cinza de pano de fundo Tailwind
- background-grayscale-0 – É usado para representar o elemento original sem um filtro de escala de cinza. É equivalente ao filtro de pano de fundo: grayscale(0).
- background-grayscale – É usado para representar o elemento original com um filtro 100% em tons de cinza. É equivalente ao filtro de pano de fundo: grayscale(100).
Tailwind Backdrop Grayscale 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
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="text-center mx-4 "
class="text-gray-600 text-2xl font-semibold"
MrExamples
class="my-2 font-semibold"Backdrop Grayscale Class in Tailwind CSS
class=" mx-16 mt-18 h-36 relative text-white"
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-4"
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-grayscale w-1/2"
backdrop-grayscale
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-grayscale-0 w-1/2"
backdrop-grayscale-0
Exemplo de Explicação
Aqui está um detalhamento do que cada parte faz:
- A declaração <!DOCTYPE html> é usada para informar ao navegador que este é um documento HTML.
- O elemento <html> é o elemento raiz do documento HTML e contém todos os outros elementos.
- O elemento <head> contém metainformações sobre o documento HTML, como o título da página e quaisquer recursos externos usados.
- O elemento <script> é usado para incluir um recurso JavaScript externo no documento HTML. Nesse caso, é um script vinculado à biblioteca Tailwind CSS hospedada em uma CDN (rede de distribuição de conteúdo).
- O elemento <body> contém o conteúdo visível do documento HTML que é exibido no navegador.
- O atributo class=”text-center mx-4″ é aplicado ao elemento <body> e usa duas classes Tailwind CSS para centralizar o texto no corpo e aplicar uma margem de 4 nos lados esquerdo e direito do o corpo.
- O elemento <h1> é um elemento de título usado para exibir um título grande na página e recebe uma classe de “ text-gray-600 text-2xl font-semibold “, que usa três classes Tailwind CSS para estilizar a cor do texto , tamanho da fonte e espessura da fonte do título.
- O elemento <p> é um elemento de parágrafo usado para exibir algum texto na página e recebe uma classe de " my-2 font-semibold ", que usa duas classes Tailwind CSS para aplicar uma margem de 2 na parte superior e parte inferior do parágrafo e defina a espessura da fonte para negrito.
- O elemento <div> é um elemento contêiner usado para agrupar e estilizar outros elementos, e recebe uma classe de “ mx-16 mt-18 h-36 relativa text-white “, que usa quatro classes Tailwind CSS para aplicar uma margem de 16 nos lados esquerdo e direito do contêiner, uma margem de 18 na parte superior do contêiner, defina a altura do contêiner como 36 e defina a cor do texto do contêiner como branco.
- Dentro do elemento <div> , há dois elementos filho, ambos estilizados com classes Tailwind CSS para criar um efeito de filtro de pano de fundo com um efeito de escala de cinza aplicado à imagem de fundo no contêiner.
- O primeiro elemento filho <div> está absolutamente posicionado para cobrir todo o contêiner pai e contém um elemento <img> com uma classe de “ cobertura de objeto arredondada-lg ” que exibe uma imagem de uma URL.
- O segundo elemento filho <div> está relativamente posicionado e contém dois elementos filhos <div> que são usados para demonstrar as classes CSS do Tailwind " background-grayscale " e " background-grayscale-0 ", que criam diferentes níveis de escala de cinza no pano de fundo do recipiente.
- O contêiner tem uma barra de rolagem horizontal devido à classe overflow-x-auto , e seus filhos são estilizados com classes Tailwind CSS para criar uma borda e definir sua largura para metade do contêiner.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
