Decorações de imagem extravagantes: contornos e animações complexas

Passamos os dois últimos artigos desta série de três partes brincando com gradientes para criar decorações de imagem realmente legais usando nada além do elemento. Nesta terceira e última parte, vamos explorar mais técnicas usando o CSS outline propriedade. Isso pode soar estranho porque geralmente usamos outline para desenhar uma linha simples em torno de um elemento - mais ou menos como border mas só pode desenhar todos os quatro lados de uma vez e não faz parte do Box Model.

No entanto, podemos fazer mais com isso, e é isso que quero experimentar neste artigo.

Vamos começar com nosso primeiro exemplo — uma sobreposição que desaparece ao passar o mouse com uma animação legal:

Poderíamos conseguir isso adicionando um elemento extra sobre a imagem, mas é isso que estamos nos desafiando não fazer nesta série. Em vez disso, podemos usar o CSS outline propriedade e alavancagem que pode ter um deslocamento negativo e é capaz de sobrepor seu elemento.

img {
  --s: 250px; /* the size of the image */
  --b: 8px;   /* the border thickness*/
  --g: 14px;  /* the gap */
  --c: #4ECDC4;

  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s) / 2) solid #0009;
  outline-offset: calc(var(--s) / -2);
  cursor: pointer;
  transition: 0.3s;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

O truque é criar um outline que é tão grosso quanto a metade do tamanho da imagem e, em seguida, desloque-o pela metade do tamanho da imagem com um valor negativo. Adicione um pouco de semi-transparência com a cor e temos nossa sobreposição!

O resto é o que acontece :hover. Nós atualizamos o outline e a transição entre os dois contornos cria o efeito de foco legal. A mesma técnica também pode ser usada para criar um efeito de desvanecimento onde não movemos o outline mas torná-lo transparente.

Em vez de usar metade do tamanho da imagem neste, estou usando um tamanho muito grande outline valor de espessura (100vmax) ao aplicar uma máscara CSS. Com isso, não é mais necessário saber o tamanho da imagem - o truque funciona em todos os tamanhos!

Você pode enfrentar problemas usando 100vmax como um grande valor no Safari. Se for o caso, considere o truque anterior onde você substitui o 100vmax com metade do tamanho da imagem.

Podemos levar as coisas ainda mais longe! Por exemplo, em vez de simplesmente recortar o extra outline, podemos criar formas e aplicar uma animação de revelação sofisticada.

Legal certo? o outline é o que cria a sobreposição amarela. o clip-path prende o extra outline para obter a forma de estrela. Então, ao passar o mouse, tornamos a cor transparente.

Oh, você quer corações em vez disso? Certamente podemos fazer isso!

Imagine todas as combinações possíveis que podemos criar. Tudo o que temos a fazer é desenhar uma forma com uma máscara CSS e/ou clip-path e combiná-lo com o outline truque. Uma solução, infinitas possibilidades!

E, sim, podemos definitivamente animar isso também. Não nos esqueçamos disso clip-path é animável e mask depende de gradientes - algo que abordamos em detalhes nos dois primeiros artigos desta série.

Eu sei, a animação é um pouco glitchy. Esta é mais uma demonstração para ilustrar a ideia do que o “produto final” a ser usado em um local de produção. Queremos otimizar as coisas para uma transição mais natural.

Aqui está uma demonstração que usa mask em vez de. É com quem eu provoquei você no final de o último artigo:

Você sabia que o outline propriedade era capaz de tanta grandiosidade? Adicione-o à sua caixa de ferramentas para decorações de imagem extravagantes!

Combine todas as coisas!

Agora que aprendemos muitos truques usando gradientes, máscaras, recortes e contornos, é hora do grand finale. Vamos encerrar esta série combinando tudo o que aprendemos nas últimas semanas para mostrar não apenas as técnicas, mas também como essas abordagens são flexíveis e modulares.

Se você estivesse vendo essas demos pela primeira vez, você poderia supor que há um monte de wrappers divs extras e pseudo-elementos sendo usados ​​para retirá-los. Mas tudo está acontecendo diretamente no elemento. É o único seletor que precisamos para obter essas formas e efeitos avançados!

Resumindo

Bem, caramba, obrigado por sair comigo nesta série de três partes nas últimas semanas. Exploramos uma série de técnicas diferentes que transformam imagens simples em algo atraente e interativo. Você vai usar tudo o que cobrimos? Certamente não! Mas minha esperança é que este tenha sido um bom exercício para você se aprofundar nos usos avançados de recursos CSS, como gradientes, mask, clip-path e outline.

E fizemos tudo com apenas um elemento! Sem wrappers div extras e pseudo-elementos. Claro, é uma restrição que colocamos em nós mesmos, mas também nos levou a explorar CSS e tentar encontrar soluções inovadoras para casos de uso comuns. Portanto, antes de inserir marcação extra em seu HTML, pense se o CSS já é capaz de lidar com a tarefa.