| path | title | subtitle | date | tags | banner | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
/desenhando-com-css |
Desenhando com CSS |
Uma forma de iniciar, organizar e pensar que podem te ajudar a chegar em alguns resultados bem legais |
2020-05-04 |
|
|
Às vezes eu faço alguns desenhos com CSS e percebi que algumas sequências de passos (ou forma de pensar) acaba sendo um pouco automática ao longo desse processo. Acredito que pode ser interessante pra quem tiver começando a se aventurar nessas brincadeiras (como eu) pode ser bem interessante e talvez uma boa forma de começar :)
Tente pegar referências em sites que você goste ou desenhos/animações que esteja acostumado. É sempre bom começar com alguns desenhos mais simples, geralmente aqueles mais "flat" sem muitas cores ou conteúdos extras. Aos poucos você pode ir se desafiando mais e aumentando a complexidade dos desenhos que você for fazendo.
<iframe height="322" style="width: 100%;" scrolling="no" title="Toggle Egg" src="https://codepen.io/gabrieluizramos/embed/mddrNyv?height=322&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy"> See the Pen Toggle Egg by Gabriel Ramos (@gabrieluizramos) on CodePen. </iframe>Provavelmente o primeiro passo ao iniciar um desenho: você terá alguma cor específica pro seu background? Seu desenho será centralizado ou alinhado em algum lugar específico?
Essa é a hora de montar a fundação do seu desenho, definindo esses aspectos e facilitando a imagem antes de você começar a desenhar as peças necessárias.
Diferentes tipos de displays e positions podem te dar algumas vantagens na hora de posicionar seus elementos.
Conforme for desenhando você vai ver a tamanha diferença que um display: flex ou um position: absolute pode fazer com seu desenho.
Tente tirar ao máximo proveito dessas regras e qualquer outra que já utilize normalmente.
Quais as formas do seu desenho? Um quadrado? Um retângulo? Um círculo?
Pensar em formas te dá a habilidade de realizar esses desenhos de forma e com abordagens diferentes. Você pode desenhar um quadrado, um círculo, um retângulo e qualquer formato de diversas maneiras diferentes.
Organizar esse pensamento em formatos e adequar às regras CSS e elementos HTML à essa forma de pensar com certeza vai te ajudar bastante ao longo do processo.
Assim como qualquer elemento HTML. Às vezes você só vai querer realizar algum detalhe em um pedaço pronto do seu desenho e não quer, necessariamente, ter que mexer na sua estrutura.
Nessas horas, pseudo-elementos caem como uma luva, permitindo que você crie esses detalhes diretamente do seu CSS e sem a necessidade de ter que adicionar um elemento HTML a mais.
Talvez você precise em algum momento criar uma sequência de elementos HTML ou uma sequência de regras CSS.
Os ganhos de utilizar algum pré-processador (como SASS) ou engine de template (como PUG) são bem claros ao longo de todo o processo, desde às variáveis até o auxílio com laços de repetição. Essas vantaegns ficam ainda mais visíveis nas situações onde você precisa criar estruturas repetitivas de qualquer forma.
Sem contar que deixa seu código bem mais legível e fácil de modificar caso precise adicionar novos elementos/regras de CSS.
Se você utiliza alguma plataforma (como é o caso do Codepen), provavelmente você consegue aplicar algum pré-processador ou engine de template facilmente selecionando as configurações do seu projeto.
<iframe height="470" style="width: 100%;" scrolling="no" title="Who is that pokemon?" src="https://codepen.io/gabrieluizramos/embed/QWWvGOE?height=470&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy"> See the Pen Who is that pokemon? by Gabriel Ramos (@gabrieluizramos) on CodePen. </iframe>Algumas formas de simular efeitos de profundidade também serão úteis ao longo desse processo. Nessas horas, propriedades como box-shadow podem te ajudar bastante.
Provavelmente ao finalizar seu desenho você já tera orgulho do resultado final, mas por que não adicionar um toque extra?
Geralmente essa pitada final pode ser feita com animações: se você fez um personagem de algum desenho, que tal animar ele piscando? Ou então, por que não tentar simular algum detalhe corporal?
A maioria dessas animações podem ser feitas com CSS diretamente, mas caso precise para dar alguma interação extra com o usuário, você também pode adicionar utilizar JS também, afinal, o que vale é a criatividade.
Com certeza o resultado vai ser bem diferente com algumas animações dando um toque especial.
<iframe height="433" style="width: 100%;" scrolling="no" title="Who watches the Douglas' watch?" src="https://codepen.io/gabrieluizramos/embed/oNgEYBw?height=433&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy"> See the Pen Who watches the Douglas' watch? by Gabriel Ramos (@gabrieluizramos) on CodePen. </iframe>Você pode realizar seus desenhos de qualquer maneira, mas por quê não escolher uma plataforma ou ferramenta que facilite seu trabalho?
Realizar as configurações de pré-processadores e engines de template como comentamos no ponto anterior pode ser uma tarefa um pouco "trabalhosa" se seu intuito é apenas desenhar alguma coisa.
Claro, todo conhecimento é válido e se você gostaria de configurar tudo isso manualmente, acho que pode ser um desafio diferente também, mas, talvez não seja o seu caso.
Algumas pessoas utilizam repositórios no github, outras utilizam gists... Eu, particularmente, gosto muito de utilizar o Codepen para me ajudar nessa questão. Ele tem uma interface amigável, salva o conteúdo automaticamente e com alguns rápidos cliques nas configurações consigo utilizar SASS ou PUG de forma bem fácil.
Como você costuma se organizar? Utilizava algumas dessas "estratégias"?
Espero que elas possam te ajudar a fazer algumas coisas bem legais! Além de realizar alguns desenhos diferentes para um possível portifólio, com certeza isso pode te ajudar a estudar CSS e melhorar suas habilidades também, conhecendo as regras mais afundo e entendendo como utilizá-las quando for necessário aplicar esses conhecimentos em outros projetos no dia-a-dia (em sites ou sistemas).
Um site que sempre gosto de dar uma olhada e com certeza vai ter muito material pra você estudar (e se espantar) é o a.singlediv.com onde a proposta é realizar desenhos em CSS utilizano somente uma div (pois é!). Dá uma olhada lá, tenho certeza que (assim como eu) você vai se espantar com a quantidade de desenho detalhado e bonito que tem por lá!
Bons desenhos! 🖼 🎨 🖌