Depois que vi o vídeo da Attekita me senti inspirado em fazer algo de arte no CSS! Link do video: https://www.youtube.com/watch?v=lm1nBxRUg0M
Ciente das minhas limitações rsrsrs escolhi o Sonic para reproduzir em pixel Art apenas utilizando código CSS e HTML!
- Primeiro determinei que cada seria o "pixel" e teria 12px x 12px (cada "pixel" tem 144 "pixels quadrados").
- Depois dividi a imagem do Sonic em 28 linhas e 23 colunas.
- Todo o desenho ficou contido na tag , que determinei no CSS como um flex container, com direção vertical.
- Cada linha do desenho ficou contida em uma tag
, que por sua vez determinei no CSS que seria um flex container, agora com direção horizontal. - Depois foi só acrescentar classes para cada com o background-color especifico que formaria a imagem.
- Por fim usei o "hover" para trocar a cor do "pixel" quando o mouse passar por cima do Sonic.