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!
Série legal de efeitos de pairar:
- Efeitos legais de foco que usam propriedades de plano de fundo
- Efeitos interessantes de passar o mouse que usam sombra de texto CSS
- Efeitos interessantes de foco que usam recorte de fundo, máscaras e 3D (Você está aqui!)
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-clip
poderes 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.
- "
- 2D
- 3d
- a
- Sobre
- avançado
- à frente
- Todos os Produtos
- Permitindo
- permite
- alfa
- já
- quantidade
- Outro
- aplicado
- Aplicar
- se aproxima
- ÁREA
- por aí
- artigo
- artigos
- fundo
- Porque
- entre
- Pouco
- fronteira
- Breakdown
- construir
- Prédio
- desafiar
- alterar
- Chrome
- mais próximo
- encerramento
- código
- coleção
- combinação
- combinado
- comparado
- Complemento
- integrações
- composta
- Configuração
- conteúdo
- continuar
- coordenar
- cobrir
- crio
- cria
- personalizadas
- Dash
- atraso
- detalhe
- DID
- diferente
- Não faz
- facilmente
- efeito
- efeitos
- elementos
- etc.
- tudo
- exemplo
- exemplos
- Exceto
- experimentar
- explorar
- pés
- Figura
- Firefox
- Primeiro nome
- seguinte
- segue
- formato
- da
- mais distante
- obtendo
- Dando
- Relance
- meta
- vai
- Bom estado, com sinais de uso
- Verde
- acontecer
- ajudar
- SUA PARTICIPAÇÃO FAZ A DIFERENÇA
- Esconder
- Como funciona o dobrador de carta de canal
- Como Negociar
- Contudo
- HTTPS
- imagens
- impossível
- Em outra
- aumentando
- independentemente
- Inspiração
- instantâneos
- interagindo
- questões
- IT
- Saber
- conhecido
- APRENDER
- aprendido
- aprendizagem
- níveis
- Provável
- Line
- Links
- pequeno
- longo
- olhar
- olhou
- procurando
- moldadas
- fazer
- FAZ
- Fazendo
- gerencia
- gerenciados
- máscara
- Máscaras
- Importância
- significa
- poder
- mais
- a maioria
- mover
- movimento
- Mozilla
- múltiplo
- aberto
- Otimize
- Outros
- parte
- perfeita
- perspectivas
- Jogar
- pontos
- POSTAGENS
- prática
- bastante
- anterior
- Produção
- Propriedades
- propriedade
- alcançar
- perceber
- reduzir
- Execute
- Safári
- mesmo
- Série
- conjunto
- Shadow
- Shape
- semelhante
- simples
- solteiro
- Tamanho
- So
- sólido
- alguns
- algo
- Espaço
- Estágio
- começo
- começado
- Unidos
- Ainda
- ajuda
- superfície
- Interruptor
- tática
- tomar
- Converse
- falando
- técnicas
- A
- coisa
- coisas
- Pensando
- três
- Através da
- tempo
- vezes
- juntos
- topo
- tocar
- transição
- Transparência
- transparente
- compreender
- compreensão
- Atualizar
- us
- usar
- valor
- visível
- querido
- Site
- O Quê
- O que é a
- enquanto
- sem
- palavras
- Atividades:
- trabalho
- seria
- investimentos