.png)
Snippets de CSS
Clareza de texto
Modifica o método de renderização do navegador padrão para uma melhor clareza de texto.
O texto fica melhor na página com este trecho.
Estado de foco para interação com o teclado
Cria um "efeito selecionado" unificado para todos os elementos selecionáveis no build de uma só vez.
Ele usa o atributo tabindex para selecionar todos os elementos focáveis.
O Webflow nos permite estilizar o estado focus-visible (chamado de "Focused (keyboard)" no menu dropdown de estados) para qualquer elemento separadamente. Use-o se quiser substituir o estilo padrão que criamos com o trecho.
Remoção da top-margin (margem superior) do Rich Text
Remove a margem superior do primeiro elemento no Rich Text.
Por exemplo, queremos que nosso H2 tenha margin-top: 4rem. Esta é a margem superior que queremos em todo o elemento Rich Text. No entanto, não queremos essa margin-top para o primeiro elemento do Rich Text. A margem de 4rem cria um espaço indesejado entre o topo do elemento Rich Text e o primeiro texto H2.
A declaração "not" é um recurso especial de segurança para a nossa solução Table of Content Attribute.
Remoção da margin-bottom (margem inferior) do Rich Text
Remove a margem inferior do último elemento no Rich Text.
Por exemplo, queremos que nosso Paragraph (parágrafo) tenha margin-bottom: 0.5rem. Esta é a margem inferior que queremos em todo o elemento Rich Text. No entanto, não queremos essa margin-bottom para o último elemento do Rich Text. A margin de 0.5rem cria um espaço indesejado entre o final do elemento Rich Text e o último texto do parágrafo.
Eventos do cursor (Pointer Events)
Define se um elemento pode ou não ser interagido de alguma forma.
Às vezes, não queremos que um determinado elemento interfira no movimento do mouse, movimento do cursor ou clique. Usamos pointer-events: none para esses casos. Esta propriedade CSS e valor impedirá toda interação do usuário com um elemento.
Por exemplo, podemos aplicar a classe pointer-events-none a gráficos de fundo em camadas. Os gráficos podem interferir em um botão de call-to-action clicável que fica atrás dos gráficos por motivos de design visual.
Em alguns casos, queremos que apenas um filho específico de um pai não clicável seja clicável ou passível de hover. Usamos pointer-events: auto para esses casos. A classe pointer-events-auto habilita eventos apenas para esse elemento específico.
Confira um exemplo de uso da propriedade pointer-events para criar um cursor personalizado
Centralizador de containers
Força o alinhamento horizontal central de todas as classes container-.
Sempre queremos manter margin-left e margin-right definidos como auto. Se nós, outro desenvolvedor ou nosso cliente fizermos uma mudança acidental na margin, o valor automático permanecerá através das tags !important.
Estilos herdados para vários elementos do Webflow.
Remove alguns estilos e tamanhos codificados do Webflow padrão.
Por padrão, este estilo está "desativado" (comentado) no cloneable do Client-First. Você deve ativá-lo manualmente se quiser usá-lo.
Este snippet de código facilita a estilização de alguns elementos do Webflow. Em vez de anular manualmente estilos codificados, podemos herdar com inherit os estilos do pai.
Por exemplo, os inputs de formulário do Webflow nunca seguem o tamanho da body font-size. Isso ocorre porque os inputs de formulário são codificados para serem 14px. Precisamos aplicar uma classe ao input e declarar um font-size. Com este snippet de código, os inputs de formulário não usam mais 14px e, em vez disso, herdam com inherit o tamanho da fonte do corpo do body font-size.
Por que esse snippet de código está desativado por padrão? Consideramos essa uma opção avançada porque pode levar a comportamentos inesperados. Por exemplo, não poderemos selecionar "Todos os links" e mudar sua cor. A atualização de estilo "Todos os links" não mudará nada porque não estamos mais trabalhando com valores codificados definidos para esses elementos. Nós sobrescrevemos essa opção utilizando inherit.
Adicionar inline-flex
Adicione inline-flex como uma propriedade CSS disponível no Designer do Webflow. Essa propriedade CSS não está disponível nativamente dentro do Webflow.
Um elemento com inline-flex se comporta como inline, enquanto garante que os elementos filhos ainda possam ser alinhados como qualquer outro filho flex.
Por exemplo, quando aplicamos flex a um botão de CTA, ele se estica para 100% de largura total. Se usarmos inline-flex no botão, o botão mantém a largura correta por meio do comportamento inline e os filhos do botão aproveitam os controles flex.
Declarações !important
Previne problemas de Especificidade CSS para nossas classes utilitárias de display, padding, e margin.
Esse snippet de código garante que nossas classes utilitárias sempre tenham suas propriedades CSS conforme o pretendido. As tags !important forçam as classes utilitárias a manterem seus controles de estilo global.
Squareify
A magia do CSS adiciona uma classe chamada div-square ao nosso projeto. Essa classe sempre cria um quadrado, independentemente da largura que você atribuir a ela.
Observe que, para colocar elementos filhos dentro de um div-square, você precisa adicionar um div com posicionamento absolute e com a position definida como full. Coloque os elementos filhos dentro deste div posicionado com absolute.