Os quadrinhos serviram de inspiração para muitos de nós. Eles afetam todos os cantos da nossa cultura. Apenas tente ir ao cinema sem pelo menos um filme baseado em quadrinhos. Parece quase impossível.

O estilo deles também se transformou em web design. Vemos isso em cores ousadas, tipografia ultrajante e layouts exclusivos.

Os avanços no CSS e no JavaScript permitem que os designers dão vida a esses estilos. Não há escassez de maneiras de adicionar um talento de inspiração em quadrinhos ao seu site.

Então, como os web designers estão trazendo estilos de quadrinhos online? Vamos verificar alguns exemplos do que uma combinação de código e criatividade pode fazer.

Bolhas de texto em estilo cômico – CSS

Criado por Josetxu

Este trecho demonstra um estilo clássico de quadrinhos. Texto grande e ousado grita em cima de fundos coloridos. A grade CSS é usada para alinhar as várias peças de layout. Bônus: clique em uma palavra para editar o texto. Uau! Isso foi legal.

Veja a caneta Bolhas de texto em estilo cômico – CSS por Josetxu

Modelo da Web de rolante lateral

Criado por Terry Scrimsher

Aqui está um exemplo que adiciona movimento à mistura. A área de rolagem lateral é uma experiência que chama a atenção. O texto animado fornece contraste e um elemento de diversão.

Veja a caneta Modelo da web de rollo de página Por Terry Scrimsher

Estilo de quadrinhos CSS UI

Criado por Gabriele Corti

Este experimento pondera uma interface do usuário de quadrinhos. É um pequeno ponto de partida inspirado no Homem-Aranha. No entanto, imagine expandi -lo para cobrir todos os elementos de um site. Essa é uma maneira de se destacar dos meros mortais.

Veja a caneta Ui de quadrinhos Por Gabriele Corti

CSS de quadrinhos de palco de estilo

Criado por Katherine Kato

Vamos um passo adiante com uma interface do usuário inspirada em quadrinhos. Esta página consegue equilibrar o estilo e a legibilidade em negrito. O layout é divertido, mas permanece super limpo. Isso mostra que “cômico” não precisa significar inacessível.

Veja a caneta Estágio de estilo – quadrinhos Por Katherine Kato

Gato de codificador cômico puro CSS

Criado por Annie Bombanie

Esse pouco humorístico cutuca os desenvolvedores. Também mostra um uso impressionante de CSS. A história em quadrinhos em preto e branco aproveita os caminhos de clipe, gradientes e Flexbox. A tira também é responsiva.

Veja a caneta Codificador cômico CAT – CSS puro por Annie

Gerar tipografia em estilo cômico

Criado por Antoinette Janus

Use este trecho para gerar texto em estilo cômico. Clique na caixa e comece a digitar. Você receberá uma fonte clássica de quadrinhos em cima de um fundo de meio -campo.

Veja a caneta Tipos cômicos por Antoinette Janus

Página cômica responsiva e acessível

Criado por Sarah Frisk

Pode ser um desafio fazer uma história em quadrinhos acessível. As fontes nem sempre são legíveis. E se você estiver usando imagens? Este snippet pretende corrigir esses problemas. Oferece um modo “CC” que fornece descrições de texto de cada painel. O resultado é uma experiência aprimorada do usuário.

Veja a caneta Página cômica responsiva e acessível Por Sarah Frisk

Campo de cristal de estilo cômico

Criado por Tibix

É fácil admirar as ilustrações inovadoras em nossos quadrinhos favoritos. Este exemplo combina belas obras de arte com o poder do código. Clique na apresentação para regenerar uma nova versão deste campo de cristal.

Veja a caneta Campo de cristal de estilo cômico por Tibix

Adicionando um pouco de pop à web

Nem todo site requer uma aparência corporativa staid. Os estilos cômicos oferecem uma alternativa para esses sites. Você pode usar essa técnica para criar um UX divertido e memorável.

Além disso, você não precisa passar por cima para encontrar sucesso. Mesmo elementos sutis do design cômico podem causar um impacto positivo. Não procure mais, alguns dos exemplos acima para prova.

Quer ver ainda mais exemplos de estilos cômicos? Use suas superpotências e siga para o nosso Coleção Codepen!

Principal