Maicon R. Santana
A parceria HTML e CSS3 nos permite criar efeitos incríveis, a web está cheia de exemplos criativos. Este, em especial, chamou minha atenção pois ilustra a evolução da linguagem e dos navegadores, é possivel reproduzir fielmente os gráficos do jogo original da Nintendo.
O código foi criado por Alcides Queiroz, você pode ver o post original clicando aqui. Como o autor explica, nenhuma imagem incorporada ou externa foi usada, muito menos JavaScript. Apenas CSS (com auxilio de um pré-processador) e estas poucas linhas em HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<main class="game"> <div class="game__background"></div> <div class="game__foreground"> <div class="foreground__mario"></div> <div class="foreground__ground"></div> </div> </main> |
See the Pen Mario made only with CSS gradients – no JS, no embedded images/data URIs, no external images and using a micro HTML =) by Alcides Queiroz (@alcidesqueiroz) on CodePen.