Efeitos legais de CSS Hover que usam recorte de fundo, máscaras e 3D

Passamos por uma série de posts agora sobre abordagens interessantes para efeitos de hover CSS. Começamos com um monte de exemplos que usam CSS background Propriedades, depois passou para o text-shadow propriedade onde nós tecnicamente não usamos sombras. Também os combinamos com variáveis ​​CSS e calc() para otimizar o código e torná-lo fácil de gerenciar.

Neste artigo, vamos construir esses dois artigos para criar animações de foco CSS ainda mais complexas. Estamos falando de recorte de plano de fundo, máscaras CSS e até mesmo molhar os pés com perspectivas 3D. Em outras palavras, vamos explorar técnicas avançadas desta vez e aumentar os limites do que o CSS pode fazer com efeitos de foco!

---

Aqui está apenas um gostinho do que estamos fazendo:

Efeitos de passar o mouse usando background-clip

Vamos falar sobre background-clip. Esta propriedade CSS aceita um text valor da palavra-chave que nos permite aplicar gradientes ao texto de um elemento em vez do real fundo.

Assim, por exemplo, podemos alterar a cor do texto ao passar o mouse como faríamos usando o color propriedade, mas desta forma animamos a mudança de cor:

Tudo o que fiz foi adicionar background-clip: text ao elemento e transition que o background-position. Não precisa ser mais complicado do que isso!

Mas podemos fazer melhor se combinarmos vários gradientes com diferentes valores de recorte de fundo.

Nesse exemplo, eu uso dois gradientes diferentes e dois valores com background-clip. O primeiro gradiente de fundo é recortado no texto (graças ao text valor) para definir a cor ao passar o mouse, enquanto o segundo gradiente de fundo cria o sublinhado inferior (graças ao padding-box valor). Todo o resto é copiado diretamente de o trabalho que fizemos no primeiro artigo desta série.

Que tal um efeito de foco em que a barra desliza de cima para baixo de uma maneira que parece que o texto é digitalizado e depois colorido:

Desta vez mudei o tamanho do primeiro gradiente para criar a linha. Então eu deslizo com o outro gradiente que atualiza a cor do texto para criar a ilusão! Você pode visualizar o que está acontecendo nesta caneta:

Nós apenas arranhamos a superfície do que podemos fazer com nossos background-clippoderes de ping! No entanto, esta técnica é provavelmente algo que você gostaria de evitar usar em produção, já que o Firefox é conhecido por ter um muitos bugs reportados relacionado com background-clip. O Safari também tem problemas de suporte. Isso deixa apenas o Chrome com suporte sólido para essas coisas, então talvez abra-o enquanto continuamos.

Vamos passar para outro efeito de foco usando background-clip:

Você provavelmente está pensando que este parece super fácil em comparação com o que acabamos de abordar - e você está certo, não há nada sofisticado aqui. Tudo o que estou fazendo é deslizar um gradiente enquanto aumenta o tamanho de outro.

Mas estamos aqui para ver os efeitos avançados de foco, certo? Vamos mudar um pouco para que a animação seja diferente quando o cursor do mouse sai do elemento. Mesmo efeito de foco, mas um final diferente para a animação:

Legal certo? vamos dissecar o código:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

Temos três camadas de fundo — dois gradientes e o background-color definido usando --_c variável que é inicialmente definida como transparente (#0000). Ao passar o mouse, mudamos a cor para branco e o --_c variável para a cor principal (--c).

Aqui está o que está acontecendo sobre isso transition: Primeiro, aplicamos uma transição a tudo, mas atrasamos a color e background-color by 0.5s para criar o efeito deslizante. Logo em seguida, alteramos o color e os votos de background-color. Você pode não notar alterações visuais porque o texto já está branco (graças ao primeiro gradiente) e o plano de fundo já está definido para a cor principal (graças ao segundo gradiente).

Então, ao sair do mouse, aplicamos uma mudança instantânea em tudo (observe o 0s atraso), exceto color e background-color que tem uma transição. Isso significa que colocamos todos os gradientes de volta aos seus estados iniciais. Novamente, você provavelmente não verá mudanças visuais porque o texto color e background-color já mudou no hover.

Por último, aplicamos o desvanecimento à cor e um background-color para criar a parte do mouse para fora da animação. Eu sei, pode ser difícil de entender, mas você pode visualizar melhor o truque usando cores diferentes:

Passe o mouse acima muitas vezes e você verá as propriedades que estão animando ao passar o mouse e as que animam ao sair do mouse. Você pode então entender como chegamos a duas animações diferentes para o mesmo efeito de foco.

Não vamos esquecer a técnica de comutação DRY que usamos nos artigos anteriores desta série para ajudar a reduzir a quantidade de código usando apenas uma variável para o switch:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

Se você está se perguntando por que eu usei a sintaxe RGB para a cor principal, é porque eu precisava brincar com a transparência alfa. Também estou usando a variável --_t para reduzir um cálculo redundante usado no transition propriedade.

Antes de passarmos para a próxima parte, aqui estão mais exemplos de efeitos de foco que fiz há um tempo atrás e que dependem de background-clip. Seria muito longo detalhar cada um, mas com o que aprendemos até agora você pode entender facilmente o código. Pode ser uma boa inspiração experimentar alguns deles sozinho sem olhar o código.

Eu sei eu sei. Estes são efeitos de hover malucos e incomuns e percebo que são demais na maioria das situações. Mas isso é como praticar e aprender CSS. Lembre-se, nós forçando os limites de efeitos de foco CSS. O efeito hover pode ser uma novidade, mas estamos aprendendo novas técnicas ao longo do caminho que certamente podem ser usadas para outras coisas.

Efeitos de foco usando CSS mask

Adivinha? O CSS mask propriedade usa gradientes da mesma forma que o background propriedade faz, então você verá que o que estamos fazendo a seguir é bem direto.

Vamos começar construindo um sublinhado sofisticado.

estou a usar background para criar uma borda inferior em zig-zag nessa demonstração. Se eu quisesse aplicar uma animação a esse sublinhado, seria tedioso fazê-lo usando apenas as propriedades do plano de fundo.

Digite CSS mask.

O código pode parecer estranho, mas a lógica ainda é a mesma que fizemos com todas as animações de fundo anteriores. o mask é composto por dois gradientes. O primeiro gradiente é definido com uma cor opaca que cobre a área de conteúdo (graças ao content-box valor). Esse primeiro gradiente torna o texto visível e oculta a borda inferior em zig-zag. content-box é o mask-clip valor que se comporta da mesma forma que background-clip

linear-gradient(#000 0 0) content-box

O segundo gradiente cobrirá toda a área (graças a padding-box). Este tem uma largura que é definida usando o --_p variável, e será colocado no lado esquerdo do elemento.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

Agora, tudo o que temos a fazer é alterar o valor de --_p ao passar o mouse para criar um efeito deslizante para o segundo gradiente e revelar o sublinhado.

.hover:hover { --_p: 100%; color: var(--c);
}

A demonstração a seguir usa as camadas de máscara como plano de fundo para ver melhor o truque acontecendo. Imagine que as partes verde e vermelha são as partes visíveis do elemento enquanto todo o resto é transparente. É isso que a máscara fará se usarmos os mesmos gradientes com ela.

Com esse truque, podemos facilmente criar muita variação simplesmente usando uma configuração de gradiente diferente com o mask propriedade:

Cada exemplo nessa demonstração usa uma configuração de gradiente ligeiramente diferente para o mask. Observe, também, a separação no código entre a configuração em segundo plano e a configuração de máscara. Eles podem ser gerenciados e mantidos de forma independente.

Vamos alterar a configuração do plano de fundo substituindo o sublinhado em zig-zag por um sublinhado ondulado:

Outra coleção de efeitos hover! Mantive todas as configurações de máscara e mudei o fundo para criar uma forma diferente. Agora, você pode entender como eu fui capaz para chegar a 400 efeitos de foco sem pseudo-elementos — e ainda podemos ter mais!

Tipo, por que não algo assim:

Aqui está um desafio para você: A borda nessa última demonstração é um gradiente usando o mask propriedade para revelá-lo. Você consegue descobrir a lógica por trás da animação? Pode parecer complexo à primeira vista, mas é super semelhante à lógica que analisamos para a maioria dos outros efeitos de foco que dependem de gradientes. Poste sua explicação nos comentários!

Efeitos de foco em 3D

Você pode pensar que é impossível criar um efeito 3D com um único elemento (e sem recorrer a pseudo-elementos!), mas o CSS tem um jeito de fazer isso acontecer.

O que você está vendo não é um efeito 3D real, mas sim uma ilusão perfeita de 3D no espaço 2D que combina o CSS background, clip-path e transform propriedades.

A primeira coisa que fazemos é definir nossas variáveis:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

Em seguida, criamos uma borda transparente com larguras que usam as variáveis ​​acima:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

Os lados superior e direito do elemento precisam ser iguais ao --b valor enquanto os lados inferior e esquerdo precisam ser iguais à soma de --b e --d (qual é o --_s variável).

Para a segunda parte do truque, precisamos definir um gradiente que cubra todas as áreas de borda que definimos anteriormente. UMA conic-gradient funcionará para isso:

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

Adicionamos outro gradiente para a terceira parte do truque. Este usará dois valores de cor branca semitransparente que se sobrepõem ao primeiro gradiente anterior para criar diferentes tons da cor principal, nos dando a ilusão de sombreamento e profundidade.

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

O último passo é aplicar um APF clip-path para cortar os cantos para aquela sensação de sombra longa:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

Isso é tudo! Acabamos de fazer um retângulo 3D com nada além de dois gradientes e um clip-path que podemos ajustar facilmente usando variáveis ​​CSS. Agora, tudo o que temos a fazer é animá-lo!

Observe as coordenadas da figura anterior (indicadas em vermelho). Vamos atualizá-los para criar a animação:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

O truque é esconder as partes inferior e esquerda do elemento para que tudo o que resta é um elemento retangular sem profundidade alguma.

Esta caneta isola a clip-path parte da animação para ver o que está fazendo:

O toque final é mover o elemento na direção oposta usando translate — e a ilusão é perfeita! Aqui está o efeito usando diferentes valores de propriedade personalizada para profundidades variadas:

O segundo efeito de foco segue a mesma estrutura. Tudo o que fiz foi atualizar alguns valores para criar um movimento superior esquerdo em vez de um superior direito.

Combinando efeitos!

A coisa incrível sobre tudo o que cobrimos é que todos eles se complementam. Aqui está um exemplo onde estou adicionando que o text-shadow efeito do segundo artigo na série para o background técnica de animação do primeiro artigo ao usar o truque 3D que acabamos de abordar:

O código real pode ser confuso no começo, mas vá em frente e disseque-o um pouco mais - você notará que é apenas uma combinação desses três efeitos diferentes, praticamente esmagados.

Deixe-me terminar este artigo com um último efeito de foco em que estou combinando plano de fundo, caminho de clipe e uma pitada de perspective para simular outro efeito 3D:

Apliquei o mesmo efeito nas imagens e o resultado foi muito bom para simular 3D com um único elemento:

Quer ver mais de perto como essa última demonstração funciona? Eu escrevi algo sobre isso.

Resumindo

Ufa, terminamos! Eu sei, é muito CSS complicado, mas (1) estamos no site certo para esse tipo de coisa e (2) o objetivo é levar nossa compreensão de diferentes propriedades CSS a novos níveis, permitindo que eles interajam com um outro.

Você pode estar se perguntando qual é o próximo passo a partir daqui, agora que estamos encerrando esta pequena série de efeitos de foco CSS avançados. Eu diria que o próximo passo é pegar tudo o que aprendemos e aplicá-los a outros elementos, como botões, itens de menu, links, etc. Mantivemos as coisas bastante simples, limitando nossos truques a um elemento de cabeçalho por esse motivo exato ; o elemento real não importa. Pegue os conceitos e corra com eles para criar, experimentar e aprender coisas novas!

---

Efeitos legais de CSS Hover que usam recorte de fundo, máscaras e 3D publicado originalmente em Truques de CSS. Você deve receba o boletim informativo.

• Coinsmart. A melhor troca de Bitcoin e criptografia da Europa.
• Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. ACESSO LIVRE.
• CryptoHawk. Radar Altcoin. Teste grátis.
• Fonte: https://css-tricks.com/css-hover-effects-background-masks-3d/