recentemente, procurei inspiração de codificação, sem talento artístico. Minha abordagem? Replicando criações visualmente atraentes de outras pessoas, concentrando -se em código limpo e conciso. Esses botões de fantasmas doces chamaram minha atenção!

Eles pareciam perfeitos para um projeto rápido. Dentro de quinze minutos, consegui isso no cromo:

Esta técnica merece compartilhamento. Este artigo detalha meu processo e explora abordagens alternativas.

Configuração inicial

Um elemento de botão simples forma a base, incorporando um atributo data-ico para inserção emoji e uma propriedade CSS personalizada, -slist , para a lista de paradas no atributo de estilo.

boo!

Post-Article Conclusão, descobri as limitações significativas de corte para texto do Safari. Ele falha nos elementos do botão, Display: flex (e possivelmente grade) elementos e texto do elemento filho. Consequentemente, as técnicas descritas aqui são incompatíveis com o Safari. A solução alternativa envolve o ninho de um dentro do botão, aplicando todos os estilos de botão ao e garantindo que ele cubra a caixa de fronteira do pai. Para usuários do Linux sem acesso físico para dispositivos, recomendo a Epiphany (obrigado, Brian!).

O CSS utiliza um :: depois pseudo-elemento para o ícone e um layout de grade para alinhamento de texto/ícone. Border, preenchimento, radio de fronteira, o -slist Stop List para o gradiente diagonal e o estilo de font também são aplicados.

button {
  display: grid;
  grid-auto-flow: column;
  grid-gap: .5em;
  border: solid .25em transparent;
  padding: 1em 1.5em;
  border-radius: 9em;
  background: 
    linear-gradient(to right bottom, var(--slist)) 
      border-box;
  font: 700 1.5em/ 1.25 ubuntu, sans-serif;
  text-transform: uppercase;

  &::after { content: attr(data-ico) }
}

esclarecimento sobre o código acima: background-origin e clandestin-clip são definidos como border-box . Background-Origin posiciona o ponto de 0,0 de Background 's 0,0 na parte superior esquerda da caixa especificada, determinando a referência para Background-Size . Border-box garante que o gradiente abrange toda a caixa de fronteira. O padrão padding-box resultaria no gradiente apenas cobrindo a área de preenchimento.

Solução específica de cromo (não-padrão)

Este método emprega três camadas de máscara e composição. Uma atualização na composição da máscara pode ser encontrada em [link para o curso intensivo]. Somente o canal alfa é importante nas camadas de máscara CSS; Os canais RGB não afetam o resultado.

começamos com duas camadas: uma camada totalmente opaca cobrindo a caixa de fronteira (alfa = 1 em todos os lugares) e um segundo, também totalmente opaco, camada restrita à caixa de preenchimento (alfa = 1 dentro da caixa de preenchimento, 0 para fora).

Visualize caixas de layout como retângulos aninhados. A camada inferior é totalmente opaca na caixa de fronteira. A camada superior é opaca dentro da caixa de preenchimento e transparente na área da fronteira. O arredondamento do canto é determinado por -Radius de borda (e -width para o preenchimento-box).

Essas camadas são compostas usando o exclui operação (ou xor no webkit). O resultado: alfa = 0 dentro da caixa de preenchimento (ambas as camadas têm alfa = 1) e alfa = 1 na área da fronteira (alfa de primeira camada = 1, segunda camada alfa = 0).

o código:

button {
  /* same base styles */
  --full: linear-gradient(red 0 0);
  -webkit-mask: var(--full) padding-box, var(--full);
  -webkit-mask-composite: xor;
  mask: var(--full) padding-box exclude, var(--full);
}

Detalhes: Os gradientes vermelhos são usados ​​para a brevidade. Os gradientes são usados ​​para ambas as camadas devido a limitações de clipe de fundo. O padrão Mask-Composite está incluído, com a versão não padrão substituída.

Isso produz uma borda de gradiente, mas não tem texto. Adicionar uma terceira camada de máscara, restrita ao texto (com texto transparente) e Xoring -o com o resultado anterior adiciona o texto de volta. No entanto, isso é específico do Chrome devido ao valor não padrão para mask-clip . A @suportes Block garante compatibilidade com navegador cruzado (sem o mascaramento de texto em navegadores sem suporte).

button {
  /* same base styles */

  @supports (-webkit-mask-clip: text) {
    -webkit-text-fill-color: transparent;
    --full: linear-gradient(red 0 0);
    -webkit-mask: var(--full) text, var(--full) padding-box, var(--full);
    -webkit-mask-composite: xor;
  }
}

Esta é uma abordagem simples, mas sua dependência de recursos fora do padrão limita sua compatibilidade do navegador. Vamos explorar métodos alternativos e mais amplamente suportados.

abordagens alternativas: soluções de elemento pseudo-elemento e borda

A solução de pseudo-elemento extra evita mascarar recortando o plano de fundo na área de texto e adicionando uma borda de gradiente usando um elemento absolutamente posicionado :: antes pseudo-elemento. A solução de imagem de borda, embora mais simples, possui limitações com -radius de borda . Esses métodos oferecem melhor compatibilidade entre navegadores do que a solução específica de cromo. Detalhes adicionais e exemplos de código para esses métodos são fornecidos no artigo original. A solução de mistura, também descrita no artigo original, oferece outra abordagem, mas com limitações em relação à interação em segundo plano. Cada método tem seus pontos fortes e fracos, dependendo do nível desejado de suporte ao navegador cruzado e requisitos específicos de design.