Executando verificação de segurança...
7
LuC45m4Th3u5
2 min de leitura ·

Criando Pixel Art com HTML, CSS e JS - Parte 1

Nota do Autor: Esse certamente foi um dos dias mais satisfatórios (e tortuosos) da minha vida. Em uma época sem ChatGPT ou Copilot, tive que escrever quase 500 linhas de código à mão, pois um professor de design pediu para eu fazer essa atividade para entender o funcionamento das divs. Apesar de ser uma atividade maçante, olhando para trás, vejo o quão importante foi para poder desenvolver outros sites. Esta primeira parte será focada em como usei HTML e CSS para realizar essa atividade, e a segunda parte será focada em como utilizei JavaScript e WebSockets para criar um tipo de "paint" com pixel art.

Como fazer?

Os quadrados são a unidade básica que compõe o pixel art neste código HTML e CSS. Eles são representados por elementos

no HTML e estilizados usando CSS para criar uma grade de quadrados dentro de uma área específica.A razão pela qual os quadrados são usados é para representar visualmente cada "pixel" na tela de pixel art. Pixel art é uma forma de arte digital na qual as imagens são criadas em uma resolução muito baixa, com cada pixel representando uma cor individual. Neste caso, os quadrados brancos são como pixels em branco em uma tela de pixel art em que você pode aplicar diferentes cores para criar padrões e desenhos.

Logo do R

Usamos Também CSS para que cada quadrado tenha uma cor: O Código base do HTML é feito da seguinte forma

    <div id="conteudo">
        <div class="linhas">
            <div class="quadrados" style="background-color:#fff;"></div>
: Esta é uma tag
que representa um quadrado branco dentro da linha. Ela tem a classe "quadrados", que pode ser estilizada ou selecionada da mesma forma que a classe "linhas". Além disso, esta tag também possui um estilo embutido (style) que define a cor de fundo (background-color) como branco (#fff). Isso significa que este quadrado específico será branco. 
 #conteudo {
    width: 640px;
    height: 640px;
    background-color: #ccc;
    padding: 30px;
}

.linhas {
    background-color: #fff;
    width: 640px;
    height: 20px;
}

.quadrados {
    width: 20px;
    height: 20px;
    float: left;
}

Essas regras CSS combinadas criam uma grade de quadrados dentro do contêiner principal, com cada quadrado sendo 20x20 pixels e alinhados horizontalmente. A cor de fundo do contêiner principal é cinza claro, enquanto a cor de fundo das linhas é branco, criando um contraste visual entre as linhas e o contêiner.

Conclusão

Como o código é muito extenso achei melhor acabar não colocando ele todo por aqui, mas disponibilizei o repositório do Git com um exemplo(Só que dessa vez com o Ghost)

Fonte: https://github.com/samsepiol1/Pixel-Art

5
DaniloAbramowicz

Projeto interessante, tentarei fazer um e depois eu volto para contar minha experiência.

Edit.

Link do meu repositório.

Como outro comentou, também fiz algumas modificações no código da minha versão para facilitar o processo, utilizei root, criei conjuntos de 3 pixels para as cores que precisavam e criei uma div que preenchia os pixels que faltavam no centro com base em uma cor definida no css.

Na questão de dificuldade posso afirmar que é praticamente nula, para um desenvolvedor novato seria uma dificuldade baixa. Porém é muito trabalhoso, olhando o repositório original imaginei que seria um processo chato, e conseguiu superar as minhas expectativas.

E assino em baixo que ver o resultado final é realmente satisfatório.

Então se houver um iniciante lendo isso e quer aprender o básico da hierarquia pai e filho, esse é o projeto perfeito para você, posso garantir que no final terá se tornando um mestre no assunto de div pai e div filha(s).

4
dcdm3g

Muito interessante! Deixe-me te dar uma microdica: você usou style para definir a cor dos quadrados, lembra? Uma outra maneira de fazer isso seria usando outras classes, por exemplo:

<style>
  .quadrados {
    width: 20px;
    height: 20px;
    float: left;
   }

  .white {
    background-color: #fff;
  }

  .red {
    background-color: red;
  }
</style>

<!-- Um quadrado branco -->
<div class="quadrados white"></div>

<!-- Um quadrado vermelho -->
<div class="quadrados red"></div>

Assim, se você quisesse mudar as cores para um tema mais escuro, por exemplo, bastaria mudar em um só lugar. Isso também te traria mais produtividade, porque você não precisaria escrever background-color: ...; o tempo todo, bastaria escrever o apelido da cor junto da classe quadrados.

2
3
refeals

Achei interessante e resolvi fazer um teste simples usando Aseprite, um programa bem famoso de pixel art.

Resultado final: https://github.com/refeals/megaman-html-css-pixelart

Primeiro criei um script para o Aseprite retornar as cores de todos os pixels da imagem. Lembrando que o script retorna #000000 para o pixel vazio, então setei a cor preta no Mega Man no Aseprite para #050505. Então transformei essa lista em divs com background-color da cor de cada linha do script e removi todos os #000000.

No meu caso, utilizei display: grid (poderia ser com table também).

Efetivamente, é possível colocar qualquer imagem no Aseprite com bons resultados. A única questão é ter que ajeitar na mão a width da imagem no CSS.

1
3
0
3
1
LuC45m4Th3u5
Autor
Autor

Sim, sim. Table é o ideal, acontece que na época, como o professor queria isso fosse uma base para Grid Layout acredito que ele tenha pensado em aplicar div para esse propósito.