No post de hoje, vou dar uma dica de CSS, hoje vou mostrar como criar um avatar hexagonal no CSS.
E você deve estar se perguntando, porque isso?

Recentemente o Twitter implementou o uso de NFTs como avatar na plataforma e isso marcou a internet como a nova era da Web 3.0.

Quem tem um avatar de NFT verificado pelo twitter, o avatar será exibido em um formato hexagonal, como por exemplo o https://twitter.com/alexisohanian, que na data que eu escrevo esse post, tem um nft como seu avatar de twitter.

Então vamos lá, fazer um avatar hexagonal, não é algo tão trivial como parece, mas provavelmente será a tendencia de agora pra frente, principalmente em projetos da Web 3.0.

Estrutura inicial

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hexagonal Avatar</title>
</head>
<body>
  <div class="container">
    <div class="title">
      <h1>Our Team</h1>
      <p>The most talented people in <strong>Web3</strong>.</p>
    </div>
    <div class="team">
      <div class="avatar">
        <img src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGF2YXRhcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" />
      </div>
      <div class="avatar">
        <img src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGF2YXRhcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" />
      </div>
      <div class="avatar">
        <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YXZhdGFyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
      </div>
      <div class="avatar">
        <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YXZhdGFyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
      </div>
    </div>
  </div>
</body>
</html>

Como vocês podem ver, temos apenas um HTML normal, com umas imagens do unsplash.

Agora vamos adicionar um css e deixar esses HTML mais bonitinho. Em um projeto real o css seria adicionado em um arquivo separado, mas pra agilizar aqui, vamos deixar no mesmo arquivo.

<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #1e1e1e;
      color: #e1e1e1;
    }
    .title {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .title h1 {
      color: rgb(202, 138, 4);
    }

    .title p strong {
      color: rgb(202, 138, 4);
    }

    .team {
      margin: 32px 0;
      display: flex;
      gap: 10px;
    }

    .team .avatar {
      display: block;
      width: 200px;
      height: 200px;
      filter: grayscale(1);
      cursor: pointer;
    }

    .team .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1);
      transition: transform 0.5s ease;
    }

    .team .avatar:hover {
      filter: grayscale(0);
    }

    .team .avatar:hover img {
      transform: scale(1.1);
    }
  </style>

Nesse ponto, se você abrir o arquivo no browser você vai ver algo como:

Avatar Hexagonal e o clip-path do CSS

Agora que vem o grande pulo do gato

via GIPHY

Primeiramente você vai precisar de um SVG no formato e tamanho que você precisa. Eu recomendo abrir o figma e criar o seu hexágono, no tamanho que você precisa e copiar o código SVG dele. Aqui nesse exemplo, eu fiz um SVG quadrado que tem como tamanho 200px. O código dele é esse aqui:

<svg width="0" height="0">
    <clipPath id="twitter-avatar">
      <path d="M187.34 72C192.699 81.282 192.699 92.718 187.34 102L154.66 158.603C149.301 167.885 139.397 173.603 128.679 173.603H63.3205C52.6026 173.603 42.6987 167.885 37.3397 158.603L4.66026 102C-0.698722 92.718 -0.698726 81.282 4.66026 72L37.3397 15.3975C42.6987 6.11543 52.6025 0.397461 63.3205 0.397461H128.679C139.397 0.397461 149.301 6.11543 154.66 15.3975L187.34 72Z" fill="#C4C4C4"/>
    </clipPath>
  </svg>

Perceba que eu peguei o path do SVG e coloquei dentro de um clipPath e dei o id de “twitter-avatar”. Veja tambem que o SVG tem largura e altura 0.

Agora vamos colocar esse SVG, depois da nossa div “container” no nosso HTML.

<body>
  <div class="container">
    <div class="title">
      <h1>Our Team</h1>
      <p>The most talented people in <strong>Web3</strong>.</p>
    </div>
    <div class="team">
      <div class="avatar">
        <img src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGF2YXRhcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" />
      </div>
      <div class="avatar">
        <img src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGF2YXRhcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" />
      </div>
      <div class="avatar">
        <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YXZhdGFyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
      </div>
      <div class="avatar">
        <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YXZhdGFyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
      </div>
    </div>
  </div>

  <svg width="0" height="0">
    <clipPath id="twitter-avatar">
      <path d="M187.34 72C192.699 81.282 192.699 92.718 187.34 102L154.66 158.603C149.301 167.885 139.397 173.603 128.679 173.603H63.3205C52.6026 173.603 42.6987 167.885 37.3397 158.603L4.66026 102C-0.698722 92.718 -0.698726 81.282 4.66026 72L37.3397 15.3975C42.6987 6.11543 52.6025 0.397461 63.3205 0.397461H128.679C139.397 0.397461 149.301 6.11543 154.66 15.3975L187.34 72Z" fill="#C4C4C4"/>
    </clipPath>
  </svg>
</body>

Agora vamos aplicar o pulo do gato no nosso CSS. Vá até a classe “avatar” e adicione o clip-path, com a url para a ancora do nosso clipPath no SVG, ficando assim:

 .team .avatar {
      display: block;
      width: 200px;
      height: 200px;
      filter: grayscale(1);
      cursor: pointer;
      clip-path: url("#twitter-avatar");
    }

Agora no browser, você verá algo como:

Código completo aqui no meu gist!

Obrigado pela leitura. Compartilhe!

Se você gostou desse post, compartilhe com seus amigos, ajude a espalhar conhecimento!

  1. Faça parte da nossa lista de Desenvolvedores
  2. Veja as dicas no Instagram
  3. Se inscreva em nosso canal do Youtube
  4. Curta nossa página no Facebook
  5. Não perca as atualizações no Twitter
  6. Siga nossos repositórios no Github


@emersonbroga

Programador há mais de 15 anos, sou formado em Desenvolvimento de Sistemas pela Faculdade Pitágoras e pós-graduado em Gestão Estratégica de Marketing pela PUC Minas. Trabalhei em diversas agências de publicidade e desenvolvimento de software e atualmente trabalho em projetos internacionais como FOX.com, FXNetworks.com, NatGeo.com entre outros. Estou atualmente dedicando meu tempo a ensinar programação em meu blog e redes sociais. Saiba mais em https://emersonbroga.com/e/sobre/.