Criando a logo do Instagram com HTML, CSS e analisando código para melhorias

Fala galera, tudo bem? Muito tempo que não posto nada por aqui, hoje aproveitando o tempo, decidi publicar esse artigo onde iremos criar a logo do Instagram e analisar o que podemos fazer de melhorias em nosso código, e aí bora começar codar?!

Primeiro modelo da logo

Escrevendo nosso HTML

Iremos começar com nosso html, definindo alguns containers para estruturar do html, abaixo nosso código.

<div class="instagram">
  <div class="container-point">
    <div class="point"></div>
  </div>
</div>

Acima, podemos observar a estrutura html que desenvolvemos. Inicialmente, criamos uma div principal chamada de "instagram", e dentro dessa div principal, implementamos uma div chamada "container-point", que, por sua vez, possui uma div filha com a classe "point". A div com a classe "instagram" servirá como nosso contêiner com uma estilização de gradiente de cor. Já a div com a classe "container-point" terá uma borda branca mais proeminente, enquanto a div com a classe "point" também terá uma borda branca. Para adicionar um elemento visual adicional, utilizaremos o seletor "after" para criar um pseudo-elemento, que assumirá a forma de um pequeno círculo.

Escrevendo nosso CSS

A partir de agora é necessária muita atenção em todo processo, para que ao finalizarmos esse primeiro modelo você possa analisar o código e observar os cenários de melhorias que iremos trabalhar no segundo modelo. Vamos ao nosso código CSS, começando pela estilização de nossa div com a classe instagram.

.instagram{
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    box-shadow: 0px 3px 10px rgba(0,0,0,.25);
    border-radius: 20px;
    display: flex;
    align-items: center;
    height: 80px;
    width: 85px; 
}

Em nossa primeira estilização na div com a classe "instagram", inserimos um plano de fundo gradiente, bordas arredondadas e algumas diretrizes de Flexbox, além de definir as dimensões de nossa caixa. Agora, avançaremos na estrutura do CSS, explorando uma funcionalidade inovadora chamada nesting. Essa técnica, como mencionada, é uma novidade no CSS 3 nível 4. Se você já trabalhou com pré-processadores CSS, como o SASS, perceberá a semelhança na estrutura. A grande vantagem do nesting é a capacidade de reduzir significativamente o número de linhas de código. Abaixo, apresento o código CSS com a próxima personalização.

.instagram{
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    box-shadow: 0px 3px 10px rgba(0,0,0,.25);
    border-radius: 20px;
    display: flex;
    align-items: center;
    height: 80px;
    width: 85px;
    .container-point{
        border: 4px solid #fff;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        margin: 0 auto;
        width: 50px;
     }
}

Nosso código agora possuí além da parte principal, temos também a div com borda branca que irá ser o container dos nosso círculos, abaixo temos o visual até o momento.

O resultado está ficando legal, né? Mas ainda iremos adicionar os outros detalhes para que de fato vire a tão famosa logo do Instagram, então vamos fechar o primeiro modelo. Vamos adicionar a última classe e o after em nosso código, abaixo o código final com os últimos detalhes do css da primeira parte.

.instagram{
    background: #d6249f;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  box-shadow: 0px 3px 10px rgba(0,0,0,.25);
    border-radius: 20px;
    display: flex;
    align-items: center;
    height: 80px;
    width: 85px;
    .container-point{
        border: 4px solid #fff;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        margin: 0 auto;
        width: 50px;
        .point{
            border: #fff 4px solid;
            border-radius: 50%;
            height: 20px;
            position: relative;
            width: 20px;
            &:after{
                background-color: #fff;
                border-radius: 50%;
                content: "";
                height: 8px;
                position: absolute;
                right: -8px;
                top: -9px;
                width: 8px;
            }
        }
    }
}

Analisando nosso código e refatorando nosso código (segunda estrutura)

Ao observarmos nosso código CSS podemos observar uma janela enorme de melhorias, e garanto que você deve ter observado algumas de grande impacto, como por exemplo trechos de código que estão repetindo várias vezes em nosso código, correto? Vamos melhorar nosso CSS removendo algumas repetições, abaixo nosso código sem repetições.

.instagram, .container-point {
  display: flex;
    align-items: center;
}

.container-point, .point{ border: #fff 4px solid; }
.conttainer-point, .point, .point:after{ border-radius: 50%; }

.instagram{
    background: #d6249f;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  box-shadow: 0px 3px 10px rgba(0,0,0,.25);
    border-radius: 20px;
    height: 80px;
    width: 85px;
    .container-point{
        border-radius: 12px;
        justify-content: center;
        height: 50px;
        margin: 0 auto;
        width: 50px;
        .point{
            height: 20px;
            position: relative;
            width: 20px;
            &:after{
                background-color: #fff;
                content: "";
                height: 8px;
                position: absolute;
                right: -8px;
                top: -9px;
                width: 8px;
            }
        }
    }
}

Deixando nosso código mais elegante
Iremos aplicar algumas variáveis em nosso código para que ele fique mais charmoso, confira o código abaixo com nossas variáveis.

:root {
  --instagram-bg-start: #fdf497;
  --instagram-bg-end: #285AEB;
  --border-color: #fff;
  --border-radius-large: 20px;
  --border-radius-medium: 12px;
  --border-radius-circle: 50%;
  --box-shadow-color: rgba(0,0,0,.25);
  --point-size: 20px;
  --point-after-size: 8px;
  --container-point-size: 50px;
}


.instagram, .container-point {
  display: flex;
  align-items: center;
}


.container-point, .point { 
  border: var(--border-color) 4px solid; 
}


.container-point, .point, .point:after { 
  border-radius: var(--border-radius-circle); 
}


.instagram {
  background: var(--instagram-bg-start);
  background: radial-gradient(circle at 30% 107%, var(--instagram-bg-start) 0%, var(--instagram-bg-start) 5%, #fd5949 45%, #d6249f 60%, var(--instagram-bg-end) 90%);
  box-shadow: 0px 3px 10px var(--box-shadow-color);
  border-radius: var(--border-radius-large);
  height: 80px;
  width: 85px;

  .container-point {
    border-radius: var(--border-radius-medium);
    justify-content: center;
    height: var(--container-point-size);
    margin: 0 auto;
    width: var(--container-point-size);
    .point {
      height: var(--point-size);
      position: relative;
      width: var(--point-size);

      &:after {
        background-color: var(--border-color);
        content: "";
        height: var(--point-after-size);
        position: absolute;
        right: -8px;
        top: -9px;
        width: var(--point-after-size);
      }
    }
  }
}

Ao inserirmos as variáveis, otimizamos o tempo de manutenção do código. Isso se torna evidente, especialmente ao considerar que alguns valores dessas variáveis estavam anteriormente duplicados em propriedades como altura e largura. Com esta modificação, finalizamos a primeira fase da nossa refatoração. Agora, passo a responsabilidade para você realizar a próxima análise. Se identificar possibilidades de refatoração, por favor, compartilhe seus comentários neste post. Na segunda parte desse artigo, explorarei como tornar nosso código HTML e CSS ainda mais conciso. Por ora, encerro por aqui. Um caloroso abraço e até o próximo post.

Link código no Codepen: clique aqui