Já faz um tempo que venho prometendo uma nova série de CSS, e desde o último post que fiz em meu blog pessoal (Animações avançadas com CSS3 - Introdução), alguns leitores vêem me pedindo para dar continuidade a série, então tive a idéia de elaborar primeiro esta série, como um requisito básico para a nossa série de animações avançadas.

Alguns temas que serão abordados

Organização é fundamental

"Um bom dev, é um dev organizado." (Clóvis Neto)

Sempre que você estiver lendo um post da nossa série, aconselho separar um caderno ou ao menos uma folha de papel e caneta, por mais bobo que seja o exercício ou exemplo, tente refazer você mesmo. Eu sempre costumo anexar alguma imagem nos meus post's de rascunhos quando estou elaborando o exemplo.

Tenha isto em mente:
ELABORAR != DESENVOLVER

Um projeto bem elaborado, irá oferecer mais produtividade, conforto e segurança para quem for desenvolver ou dar manutenção no mesmo.

Animação de textos

Como o foco principal será criar vinhetas, acredito que antes de tudo temos que aprender a controlar e desenvolver animações interessantes nos textos. Desenvolva esta habilidade com perfeição, e todo o resto ficará 99% mais fácil.

Desenhando, animando e controlando formas (quadrados, triângulos, círculos)

Após desenvolver sua skill de "text-animation" (SIM! Teremos skill's ahuahuahuha), descobriremos que um simples quadrado duplicado algumas vezes, um circulo que utiliza uma técnica de box-shadow ou até mesmo um triangulozinho podem fazer váaaarias coisas incríveis. Não acredita? Segue abaixo alguns exemplos do meu Codepen:

See the Pen Round, roouund!! by clovis neto (@clovisneto) on CodePen.

See the Pen Square Rotate :D by clovis neto (@clovisneto) on CodePen.

See the Pen Disk Circle by clovis neto (@clovisneto) on CodePen.

See the Pen Bluup by clovis neto (@clovisneto) on CodePen.

See the Pen Pure CSS Load Battery by clovis neto (@clovisneto) on CodePen.

Todos os exemplos a cima são formas básicas (quadrados, triângulos e círculos). Todos estão utilizando apenas CSS e HTML <3

SVG + CSS <3

Particularmente um dos tópicos que eu mais gosto e me empolgo em falar, SVG junto com CSS é lindooo! Semana passada estava aprofundando minhas técnicas de animações com SVG e CSS, quando pude notar que a maioria dos tutorias de SVG + CSS em PT-BR, só falam de animações na propriedade stroke e fill, algo que SVG vai muiiiiito além disto. Prepare-se, pois iremos embarcar num mundo de animações muito além do simples \o/

Exercícios

O ponto mais importante da série! Sempre que terminarmos um post, irei pedir um exercício postado no CODEPEN, baseado no post que aprendemos, e só irei continuar a série dependendo da conclusão e postagem destes exercícios. O link do PEN deverá ser enviado para o email do CSS Brasil (contatocssbrasil@gmail.com).

E muito mais!

No final da semana irá rolar o Front in Aracaju, então deixarei para publicar o primeiro post da nossa série na segunda-feira, então separem os materiais e já vão se preparando o/o/o/o/

Um novo jeito de aprender CSS no Brasil