Criando Estética Cyberpunk com clip-path no CSS

• A estética Cyberpunk é conhecida por seus designs futuristas e recortes geométricos.
• Com a propriedade CSS clip-path, é fácil criar efeitos visuais impressionantes, como recortes em elementos, que remetem a essa estética.
• Neste exemplo, vamos explorar como usar clip-path para criar um botão com um recorte no canto inferior direito, típico do estilo Cyberpunk.

Como Funciona?

• clip-path:

  • Define uma região de recorte em um elemento usando uma forma geométrica.
  • No exemplo, usamos um polígono para criar um recorte no canto inferior direito do botão.

• Pontos do Polígono:

  • Os valores de clip-path: polygon() definem os vértices do polígono.
  • No exemplo, o polígono cobre toda a área do botão, exceto um pequeno retângulo no canto inferior direito, criando o efeito de "entalhe".

Código CSS

button {
    padding: 8px 15px; /* Espaçamento interno */
    background: yellow; /* Cor de fundo */
    color: black; /* Cor do texto */
    font-family: 'Barlow', sans-serif; /* Fonte */
    font-size: 16px; /* Tamanho da fonte */
    font-weight: 600; /* Peso da fonte */
    text-transform: uppercase; /* Texto em maiúsculas */
    border: none; /* Sem borda */
    clip-path: polygon(
        100% 0, /* Canto superior direito */
        100% calc(100% - 10px), /* Desce 10px do canto inferior direito */
        calc(100% - 10px) 100%, /* Move 10px para a esquerda no canto inferior */
        0 100%, /* Canto inferior esquerdo */
        0 0 /* Canto superior esquerdo */
    );
}

Explicação do clip-path

• 100% 0: Canto superior direito.
• 100% calc(100% - 10px): Desce 10px do canto inferior direito.
• calc(100% - 10px) 100%: Move 10px para a esquerda no canto inferior.
• 0 100%: Canto inferior esquerdo.
• 0 0: Canto superior esquerdo.

Esses pontos criam um polígono que recorta um pequeno retângulo no canto inferior direito do botão.

Considerações

1. Efeitos Externos Ocultos:

   • A propriedade clip-path também recorta efeitos externos, como bordas e sombras de caixa (box-shadow).
   • Se precisar desses efeitos, considere aplicá-los a um contêiner pai ou usar técnicas alternativas.

2. Personalização:

   • Ajuste os valores do clip-path para criar diferentes formas e recortes.
   • Experimente com outras formas, como círculos (circle) ou elipses (ellipse).

3. Suporte a Navegadores:

   • Verifique a compatibilidade do clip-path em Can I use.
   • Para navegadores mais antigos, considere usar fallbacks ou técnicas alternativas.

Exemplo Prático

<button>Clique Aqui</button>

button {
    padding: 8px 15px;
    background: yellow;
    color: black;
    font-family: 'Barlow', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    clip-path: polygon(
        100% 0,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        0 100%,
        0 0
    );
}

Conclusão

• A propriedade clip-path é uma ferramenta poderosa para criar designs únicos e modernos, como a estética Cyberpunk.
• Com um pouco de criatividade, você pode aplicar recortes geométricos em botões, imagens e outros elementos, elevando o visual do seu projeto.
• Lembre-se de testar a compatibilidade e considerar fallbacks para navegadores mais antigos.