Criar arte css animada

Feb 2, 2026

Como

(Crédito da imagem: Tiffany Choong)

Criar imagens CSS é uma maneira divertida de praticar suas habilidades e criar uma peça de arte limpa. É uma boa pausa no dia habitual do dia-a-dia dos componentes da Web. Tudo o que você precisa para começar é um documento em branco e um arquivo CSS; Recomendamos o uso do SASS, que permitirá que você reutilize seus estilos e escreva seletores mais simples (consulte o nosso guia para O que é sass? para saber mais sobre este pré-processador).

Vamos começar com algumas dicas de cima para masterizar o CSS Art, então mostrar-lhe como recriar este balão animado Pikachu usando apenas CSS (certifique-se de manter seus arquivos seguros em decente armazenamento na núvem ).

Para mais inspiração, explore o nosso roundup de surpreendente Exemplos de animação CSS. . Depois de algo mais básico? Comece aprendendo Como criar um lolly de gelo usando CSS .

Ou, se você estiver começando um novo site, abandone a complexidade com um brilhante Construtor de sites e certifique-se de obter o seu hospedagem na web. local.

Reduza o design a formas simples

Ao criar arte css, ele pode ajudar a analisar algumas imagens de referência para inspiração e, em seguida, criar uma variação simplificada dos desenhos animados, imaginando o assunto usando formas primitivas, que melhoram Formas de css. .

Use um fundo brilhante para ajudar com o posicionamento

Quando formas sobrepostas de cores semelhantes, é difícil ver onde estão sendo colocadas ou como se parecem. É útil ter a forma em que você está trabalhando se destacando mudando o cor de fundo para algo brilhante e alegre, como magenta. Isso permite que você veja facilmente a posição e a forma exatas do seu elemento.

Use tamanhos de fluidos

Quando se trata de definir um valor px para propriedades, recomendamos o uso da unidade REM. No caso de que você deseja que você deseja que sua peça geral seja maior ou menor, usando as REM Unidades, você só precisa alterar a base html {font-size: ... px} em seu sass para escalar toda a arte para cima ou para baixo.

Ao definir as alturas e larguras de elementos filho que devem ter um tamanho relativo para o pai, as porcentagens são úteis. Como esses valores são sempre em relação a seus pais, eles também devem escalar com o Tamanho da fonte HTML .

Generate CSS — Gerar CSS é uma conferência sob medida trazida a você pelo Creative Bloq, Net e Web Designer. Clique para reservar seu bilhete de madrugada! (Crédito da imagem: Getty / Future)

01. Comece com contêineres

Um recipiente de wrapper para manter as peças do Artwork é um bom lugar para começar. Dentro do recipiente, podemos colocar três contêineres internos - a cabeça, o corpo e os balões.

 & lt; div classe = "contêiner" & gt;
& lt; div class = "head" & gt; & lt; / div & gt;
& lt; div classe = "corpo" e gt; & lt; / div & gt;
& lt; div classe = "balões" & gt; & lt; / div & gt;
& lt; / div & gt;

O recipiente deve ser geralmente Posição: Relativo para permitir que outros elementos sejam colocados relativamente dentro dele usando Posição: Absolute e ter uma altura e largura bem definidas, de outra forma, posicionar os elementos infantis torna-se difícil.

Em seus estilos, adicione suas cores básicas como variáveis de sass para reutilização. O sass. Lighten () e escurecer() As funções criarão tons e tons de suas cores, que podem ser usadas como destaques ou sombras para o seu personagem.

02. Estilo a cabeça

Com a estrutura descoberta, vamos estilizar a cabeça primeiro. Neste caso, a cabeça faz um bom ponto central para a obra de arte, por isso, em vez de definir sua posição para absoluta, ela pode ser definida como parente. Isso permite que o recipiente tenha um elemento estável dentro dele, dando aos outros elementos absolutos flutuantes de um ponto de ancoragem e, portanto, mais controle sobre sua posição.

As características faciais precisarão de um recipiente para posicionamento, então crie um & lt; div & gt; Dentro do recipiente da cabeça para a forma amarela com uma cor de largura, altura e fundo - agora vamos fazer este retângulo parecer mais uma forma de cabeça. Uma das propriedades mais comuns e úteis na arte CSS é a raio de fronteira propriedade, que muda a curva dos cantos x ou y de uma caixa e pode ser usado para criar mais formas orgânicas.

Usando esta técnica com uma combinação rem e porcentagem, você pode fazer formas semelhantes a blob, em vez de simplesmente elipses, que escala naturalmente com o html. {font-size: ... px} :

 .face {
Fronteiriço-Raio-esquerdo: 50% 4.5rem;
Border-top-right-raio: 50% 4.5REM;
raio de borda-esquerda-esquerda: 50% 3rem;
Raio-inferior direito-raio: 50% 3rem;
...
}

Depois de aperfeiçoar a cabeça raio de fronteira Posicione o restante das características faciais como elementos filho da cabeça, como os olhos, bochechas, nariz e ouvidos. Como a cabeça, o raio de fronteira truque será útil desde Raio-Raio: 50% pode não parecer atraente.

03. Mova-se para o corpo

Um corpo & lt; div & gt; pode ser colocado dentro do recipiente do corpo atrás da cabeça e moldado com o mesmo raio de fronteira técnica, bem como os braços, pernas e cauda. Para permitir a sobreposição adequada, o corpo real deve ser seu próprio elemento, como certos elementos internos, como as listras traseiras, precisarão ser cortadas com estouro: escondido . Para dar o corpo mais profundidade, o Transform: Skew () propriedade pode pumentar o corpo ligeiramente.

A cauda do raio pode ser construída usando três retângulos separados em vez de tentar formar essa forma de um elemento. Os retângulos podem ser girados e posicionados por cima uns dos outros para formar um parafuso. Os braços e pernas podem usar a cor primária mais escura que criamos usando o Sass escurecer() Então eles se destacam.

04. Adicione balões

Agora que o mouse elétrico é concluído, vamos amarrar balões nas costas. Adicione alguns. & lt; div & gt; s com estilos compartilhados com uma corda de criança & lt; div & gt; e posicione-os agrupados acima da cabeça. A string é invisível, exceto um fronteira-esquerda , que ajuda a parecer mais parecido com a corda.

Para amarrar a corda ao redor da cintura do personagem, um & lt; div & gt; pode ser colocado dentro do corpo para permitir o posicionamento adequado. A corda precisa de uma ligeira curva para aparecer como se estivesse amarrada ao redor do corpo, para que possa ter uma pequena altura, border-bottom. e A. border-bottom. raio esquerdo e direito, que faz uma linha curva fina:

.
Altura: 1rem;
Largura: 9rem;
fronteira-direita: 1px sólido $ branco;
Fronteira-esquerda: 1px sólido $ branco;
border-bottom: sólido 1px $ branco;
raio-inferior esquerdo-raio: 50% 1rem;
Border-Bottom-Right-Radius: 50% 1rem;
}

05. Animate o CSS

Podemos dar a vida do personagem adicionando @keyframes. animações. Os braços, pernas, ouvidos e cauda podem ser animados com Transformar: girar () . Garantir a origem de transformação. é definido para a 'articulação' (isto é, central de uma perna) e ajustar a rotação. Este tipo de animação pode ser usado várias vezes em uma mixina de sass:

 @Mixin Animateratate ($ Nome, $ Start, $ end) {
@keyframes # {$ NAME} {
0%, 100% {transform: girar (# {$ start} deg)}
50% {Transform: girar (# {$ end} deg)}
}
}

Finalmente, adicionando um 5S lento Transform: Traduey () A animação keyframe animará o personagem para cima e para baixo, como se estivesse flutuando. Para um toque de realismo, uma animação piscando usando Transform: Scoundy (0.1) A propriedade pode ser usada para que pareça que os olhos estão fechando.

Este artigo foi originalmente publicado na revista Creative Web Design internet . Comprar edição 283. ou se inscrever .

Consulte Mais informação:

5 coisas que você nunca soube sobre CSS
Adicionar filtros SVG com CSS
Como codificar efeitos de texto inteligentes com CSS

Criar arte css animada

01. Comece com contêineres

02. Estilo a cabeça

03. Mova-se para o corpo

04. Adicione balões

05. Animate o CSS

Como - Artigos mais populares

Gerenciar o estado do formulário reagir com Formik

Como criar um efeito de paralaxe em camadas no seu site

Crie seu próprio pincel caligráfico no Illustrator

Melhore suas habilidades de arte conceitual no Photoshop

Pintura em uma malha 3D com a ferramenta PolyPaint Zbrhushcore

Tutorial de texto 3D para designers gráficos

Como usar ferramentas digitais para criar um visual desenhado à mão

Como levar seu logotipo de vetor de 2D para 3D

Categorias