10 designs de personagens criados inteiramente com HTML e CSS

Estou constantemente surpreso com o quanto você pode fazer com CSS. Os desenvolvedores da Web sabem que o CSS permite criar layouts de página incríveis e efeitos de animação personalizados.

Mas você também pode usá-lo para muitos projetos divertidos. Como, por exemplo, construir designs de personagens apenas com CSS. Soa estranho certo?

Bem, definitivamente é. E eu coletei alguns dos designs de personagens mais estranhos (ainda que mais legais), todos feitos de código HTML e CSS 100% puro.

1. Aves com raiva

Quem não ama Angry Birds? Eles começaram como um jogo e de alguma forma conseguiram seu próprio filme depois de perfurar a cultura pop.

E esta caneta de Rachel Bull prova que os Angry Birds podem até encontrar o caminho para o CSS.

Ironicamente, há uma imagem nesta página e é usada para incorporar o tipo personalizado no topo. Todos os outros elementos, desde as curvas desses pássaros até os gradientes personalizados, são executados em CSS puro.

Talvez não seja o trecho de código mais prático, mas certamente uma inspiração.

2. Frankenstein

O Frankenstein de Mary Shelley é amplamente conhecido como a criatura de pele verde revivida. Embora seja tecnicamente o monstro de Frankeinstein, isso não sai tão bem da língua.

E embora essa criatura de Frankenstein possa ser um pouco mal nomeada, ainda é um dos melhores designs de personagens que já vi.

Funciona em apenas 40 linhas de HTML e a desenvolvedora Victoria Ninni Bergquist até adicionou um pouco de CSS para ajudar o monstro a piscar. Muito arrumado!

3. Alienígena de Toy Story

Toy Story da Pixar tem tantos personagens memoráveis ​​e esses caras alienígenas malucos certamente fazem parte desse elenco.

Sunyoung Park construiu esta caneta como uma demonstração para CSS e para testar os limites da codificação front-end. Ele deve renderizar corretamente em todos os principais navegadores e até mesmo em alguns navegadores mais antigos. Embora dependa bastante da propriedade rotate().

Felizmente, isso faz parte do recurso de transformações CSS que suporta navegadores que remontam ao IE9+. Portanto, este pequeno alienígena verde pode encantar a maior parte do mundo conectado à Internet.

4. Aku Aku

Se você tinha um PlayStation, provavelmente conhece o Crash Bandicoot. Bem, esse cara louco chamado Aku Aku é uma réplica perfeita da máscara... criatura... coisa.

Cada elemento tem seu próprio div com uma classe relevante que define esse recurso (ou seja, olho, lábio do nariz).

Eu diria que a parte mais difícil de todo esse design é a coroa de penas na cabeça. Além das animações legais que podem incentivar os jogadores a pegar seus antigos jogos Crash.

5. Bebê Squirtle

Aqui está outro ótimo exemplo de animação misturada com design de personagens CSS.

Josh Bader codificou esse personagem Squirtle usando CSS puro e apenas 15 linhas de HTML. Impressionante!

Para obter o efeito de caminhada, Josh anexou a pseudo-classe :after em cada elemento com uma animação repetida. Uma façanha surpreendentemente simples quando você olha por baixo do capô e é ainda mais surpreendente como tão pouco código é necessário para construir personagens como esses.

6. Rick sem Morty

Nesta caneta você encontrará o trabalho maluco do desenvolvedor James Gilmore, que criou um Rick chibi em CSS puro.

Na verdade, o design usa algumas sombras bonitas CSS para criar profundidade e dar vida a esse personagem. Sem mencionar a animação repetida que também combina bem com o design.

Observe que isso também é executado no Sass e, se você quiser mexer nele, existem variáveis ​​personalizadas no código. Está muito bem formatado, então este seria um trecho incrível para estudar para aprender Sass.

7. Brian Griffin

Aqui está outro design de personagem de Rachel Bull, este com Brian Griffin de Family Guy.

É surpreendente a quantidade de detalhes que você pode obter apenas com CSS puro. Todo o estilo de Brian combina de perto com o estilo de arte do programa e usa sombras que parecem incrivelmente realistas.

Embora este seja bastante técnico, com mais de 150 linhas de CSS e esteja usando a biblioteca Compass para inicializar.

8. Emmet

Do filme Lego é Emmet em toda a sua glória. Rachel mais uma vez construiu este trecho do zero usando CSS e Haml, a maneira simplificada de escrever HTML moderno.

Alguns desses elementos realmente se destacam como bastante impressionantes para serem executados apenas em CSS. Notavelmente, os redemoinhos de cabelo realmente parecem peças de Lego de plástico. Louco que isso seja possível!

Há muita lógica Sass no CSS, e se você é um dev nerd, vai gostar de bisbilhotar esta caneta. Tanto o código quanto o resultado são gloriosos.

9. CSS Eevee

Construído em torno do fenômeno Pokemon Go é este puro CSS Eevee feito por David Khourshid.

Ele usa um plano de fundo e estilo de página semelhantes ao do aplicativo enquanto recria todo o Pokémon em CSS puro. Com um pouco de texturização e algumas camadas inteligentes, David fez este Eevee realmente parecer 3D!

As animações também são um toque agradável, e fazem a coisa toda parecer mais realista. Se você é um fã de Pokémon ou nunca tocou no jogo, você tem que admitir que este é um bom trabalho.

10. Rato Mickey

Embora esta cabeça de Mickey Mouse seja um pouco mais simples, também é uma façanha. Você pode pensar que seria mais fácil de gerenciar porque é estático, no entanto, a caneta empurra mais de 450 linhas de Sass.

A parte mais técnica é colocar todas as formas em ordem e reorganizar os elementos para alinhar corretamente uns sobre os outros.

No entanto, o resultado é fantástico, e você pode ver a semelhança com os primeiros desenhos do Mickey.

11. Princesa Zelda

Deixei o melhor para o final com este design de personagem de Zelda. Ela é um pouco curta nas pernas, mas no geral o estilo é preciso.

O desenvolvedor Charlie Marcotte usa Sass e transformações CSS personalizadas para organizar todos os elementos. Além disso, o HTML bruto é bastante simplificado graças ao pré-processador Pug.

Se você está tentando ultrapassar os limites do seu conhecimento de CSS, por que não aceitar um projeto semelhante? É uma ótima maneira de testar suas habilidades, e você sempre pode compartilhar o que você construir nos comentários abaixo.