Máscara de imagem de trabalho Magia com Houdini

Sep 17, 2025
Como
An image showing the outlines of a circle, square and triangle used as CSS masks for images of a seascape.

Se você estiver interessado em aprender mais sobre Houdini, certifique-se de participar de gerar Nova York (24 a 25 de abril). Na conferência, você pode pegar Sam Richard, Engineer Parceiro Enterprise no Google, discutindo como Houdini pode melhorar muito a flexibilidade, o poder, o desempenho e a manutenção dos padrões de design. Para reservar o seu bilhete para esta premiada conferência para web designers, visite GenerateConf.com. .

Como desenvolvedores, às vezes tomamos CSS como garantidos. Ao mudar algumas propriedades, podemos alterar a aparência de um site inteiro. Os fornecedores de navegador estão fazendo muito trabalho em nosso nome para chegar a esse ponto.

Mas, à medida que os novos recursos do CSS saem, pode ser um pouco até que possamos usá-los para sites de produção. Usuários com navegadores antigos ficarão presos com um conjunto de estilos de downgrade, progressivamente aprimorados que não parecem tão bons quanto aqueles em navegadores modernos.

  • 19 Cool CSS animação exemplos para recriar

Houdini está definido para mudar tudo isso. É uma coleção de projetos de especificações que fornecem aos desenvolvedores acesso a algumas das magias por trás da cena fornecida pelo CSS. Quando todas as especificações estiverem concluídas, os desenvolvedores poderão usar o JavaScript para determinar como aspectos como cálculos de layout e estilo são executados.

O que é Houdini capaz?

Houdini é uma coleção de APIs e especificações projetadas para diminuir a fricção entre JavaScript e CSS. Ao expor algumas das magias que os navegadores se apresentam aos desenvolvedores, somos capazes de fazer ajustes na página que funcionam melhor para o nosso caso de uso específico.

Corrigido no meio desses avanços é o conceito de um worklet - uma classe leve e altamente especializada focada em ações específicas, como animações. Eles são semelhantes aos trabalhadores da web, que se executam do tópico principal e mantêm a página responsiva. Estes podem ser expandidos no futuro, já que as necessidades dos desenvolvedores evoluem.

Enquanto algumas dessas APIs ainda estão em seus estágios iniciais, vários agora pousaram em cromo e ópera, a partir de V66 e V53, respectivamente. A API do CSS Paint permite que os desenvolvedores criem imagens em JavaScript para uso sempre que uma imagem normalmente seria usada no CSS, enquanto o modelo de objeto digitado CSS expõe objetos CSS ao seu JavaScript, em vez de apenas strings. O suporte no Safari para essas APIs está atualmente em desenvolvimento, vários mais APIs estão a caminho nos vários APIs do Chrome e da Houdini estão trabalhando no processo de especificação do W3C, com a API de tinta já atingiu a recomendação candidata.

Os projetos de APIs estão constantemente mudando e os presentes no momento podem não se assemelhar o que acaba por terras nos navegadores. Ficar de olho em ishoudinirheadyet.com. para ficar à frente das mais recentes melhorias.

Quer algo mais simples? Tente A. Construtor de sites . De qualquer forma, porém, seu hospedagem na web. O serviço precisa funcionar para você.

Use Houdini para remodelar máscaras de imagem

Por enquanto, até mesmo apenas a API do CSS de Houdini é capaz de alcançar muito. Por exemplo, podemos combiná-lo com máscaras de imagem para remodelar elementos sob demanda.

Para mostrar como isso pode funcionar, navegue até Filesilo. Para acessar os arquivos relevantes (também, verifique se seus arquivos estão prontamente acessíveis à direita armazenamento na núvem ).

01. Aplicar o mascaramento CSS

An image showing three images of seascapes, awaiting the application of a CSS mask.

As imagens antes de uma máscara CSS é aplicada

Antes de começarmos a criar o worklet, configure um servidor local. Então precisamos definir a máscara em cada imagem. Enquanto a propriedade CSS necessária é Imagem de máscara , ainda é prefixado no cromo. Isso significa que também precisamos do Webkit. prefixo ao lado dele.

Abra estilos / mask.css. e atualize os estilos para o mascarado aula. Parte do efeito é revelar totalmente a imagem quando o usuário paira sobre ele. Adicionar A. revelar Propriedade personalizada para o elemento nessa instância. 

 .masked {
  [...]
  -Webkit-Mask-Image: Pintura (máscara);
  Imagem da máscara: pintura (máscara);
}
.masked: pairar, .masked: foco {
  --Mask-revelar: verdadeiro;
}

02. Aplicar propriedade de forma de máscara

Propriedades personalizadas não precisam estar no elemento raiz a serem apanhadas pela API. Eles podem ser aplicados ao elemento que está sendo pintado, o que irá substituir quaisquer selecionadores com uma especificidade menor.

Agora vamos aplicar um especial forma de máscara Propriedade personalizada para três classes de forma. Isso diz ao worklet que forma para renderizar. 

 .masked.square {
  - Máscara: quadrado;
}
.masked.circle {
  - Máscara: Círculo;
}
.masked.triangle {
  - Máscara: Triângulo;
}

03. Defina qual forma usar

Abrir scripts / mask.js. . Isso já foi preenchido com parte da lógica para criar as formas. Ainda precisamos amarrá-lo com as classes que acabamos de escrever.

O forma de máscara Propriedade personalizada Define a forma que será usada. Nós temos um círculo, um quadrado ou um triângulo para escolher. Se alguém escolhe uma forma diferente ou nenhuma forma, padrão para uma forma de círculo. Apare todos os espaços deixados pela formatação CSS. 

 Deixe a forma = 'círculo';
if (propriedades.get ('- Forma de máscara') e amp; e amp;
  ['Quadrado', 'triângulo', 'círculo']
  .Clude (propriedades.Get (
  '- forma máscara'). Tostring (). Trim ())) {
  forma = propriedades.Get (
  '- forma máscara'). Tostring (). Trim (); }

04. Decida se deve revelar

Por padrão, as máscaras fornecem o contorno da forma definida. Quando o usuário paira sobre eles, o revelar A propriedade personalizada se torna verdadeira, de modo que deve preencher a forma.

Tipos de propriedade personalizados estão chegando em um ponto posterior, o que significa para agora um verdade O valor será passado como uma string. Combine contra a string e defina uma nova variável se estiver definida. 

 Deixe revelar = falso;
if (propriedades.get ('- máscara revelam') & amp; & amp;
  Propriedades.Get ('- máscara revelam')
  tostring (). aparar () == 'true') {
  revelar = verdadeiro; }

05. Encontre o menor comprimento

Finalmente, queremos que as formas tenham lados de igual comprimento. Isso significa que precisamos encontrar o menor da largura ou altura da imagem e usar esse comprimento para calcular as formas.

Defina a comprimento máximo Variável para contar o resto do código que tamanho para tornar as formas. Defina a largura da linha do contexto para uma proporção desse tamanho, a fim de manter as coisas em escala. 

 const maxlength =
  Math.min (geom.width, geom.Height);
ctx.linewidth = maxlength / 25;

Este artigo foi originalmente publicado na revista Creative Web Design Web designer . Inscreva-se no Web Designer .

Quer pegar mais truques de Houdini?

An image of generate New York speaker Sam Richard, promoting his talk 'Design System Magic with Houdini'. Generate New York runs from April 24 - 25.

Gerar, a premiada conferência para web designers, retorna a NYC em 24 a 25 de abril! Clique na imagem para reservar ingressos

Interessado em aprender mais sobre como Houdini pode adicionar mais Oomph a seus projetos? Sam Richard, Engenheiro de Parceiros da Enterprise no Google estará dando sua mágica de sistema de design de conversa com Houdini em gerar Nova York em 25 de abril, no qual ele lhe ensinará como isso pode ajudá-lo a resolver problemas de sistema de design comum e melhorar muito a flexibilidade, o poder, desempenho e manutenção desses padrões.

Gere de Nova York de 24 a 25 de abril - Obtenha seus ingressos agora !

Artigos relacionados:

  • Gerar Nova York está de volta para 2019
  • 14 das melhores apis javascript
  • 10 novas ferramentas de design web para abril de 2019

Como - Artigos mais populares

Como usar o armazenamento em nuvem como criativo

Como Sep 17, 2025

(Crédito da imagem: Jan Vašek de Pixabay) Por que você precisa saber como usar o armazenamento em nuvem? Well Clou..

Como editar um vídeo no Tiktok

Como Sep 17, 2025

(Crédito da imagem: Mabel Wynne) Aprender a editar um vídeo em Tiktok provavelmente não teria sido algo que você ..

Use Brain.js para construir uma rede neural

Como Sep 17, 2025

(Crédito da imagem: Getty Images) Brain.js é uma maneira fantástica de construir uma rede neural. Simplificando, u..

Como criar uma página em quadrinhos

Como Sep 17, 2025

Este tutorial mostrará como criar uma página em quadrinhos. Embora estamos usando Pintura do estúdio do clipe. ..

Como alterar a fonte no seu Twitter Bio

Como Sep 17, 2025

Há muitas pessoas no Twitter - 261 milhões de contas no Twitter da última vez que verificamos. E isso significa que pode ser d..

Como placar um rosto para animação

Como Sep 17, 2025

Quando eu aprendi a criar plataformas de personagem em Maya Way em 2002 Em 2002, enquanto trabalhava no Título PlayStation 2 Sup..

Criar uma Cinemagraph com o Photoshop em 60 segundos

Como Sep 17, 2025

Queria que você pudesse pegar uma nova habilidade, mas não consegue encontrar a hora de se sentar e aprender? Adobe's. Faça agora playlist pode ser apenas o que você é dep..

Explore o código criativo com P5.JS

Como Sep 17, 2025

Passar um dia com Brendan Dawes. no Gere London e desc..

Categorias