Categorias
CSS Dicas Front-end Geral

CSS3 – Seletores com Atributos

Neste post você vou te mostrar uma estratégia MUITO bacana para trabalhar com atributos e organizar seu código.

Além disso, você vai também entender como trabalhar com especificidade e deixar seu código de fácil leitura e muito lógico!

Veja o vídeo abaixo:

Hierarquia e especificidade são as bases do CSS3.

Se você ainda não domina a hierarquia no CSS, em todas as suas formas, infelizmente você não será capaz se ser um desenvolvedor de sucesso.

Pensando nisso, eu falei sobre isso (e muitos outros assuntos) no livro Quebrando as Regras do CSS

Neste livro eu resolvi falar sobre o que ninguém: Um desenvolvedor completo, que domina as ferramentas que usa para trabalhar, deve incorporá-la.

Você deve PENSAR em CSS.

Como quando você vai aprender qualquer idioma: Você se torna fluente quando incorpora, quando pensa, fala e sonha naquele idioma.

No CSS é a mesma coisa

E como se não bastasse, eu preparei algumas surpresinhas para quem adquirir o livro na pré-venda.

Para saber mais sobre o livro Quebrando as Regras, é só clicar neste link.

Categorias
CSS Dicas Front-end Geral

CSS3 – Animações simples com Transitions (vídeo)

Neste simples tutorial você vai aprender a criar animações muito úteis e de forma muito rápida com a propriedade transitions do CSS3.

Esta abordagem é muito útil para efeitos rápidos e visualmente bonitos no front-end.

Categorias
Geral

CSS3 Flexbox para quem Não sabe nada de Flexbox.

Flexbox.

O layout flexível que surgiu como solução para o desenvolvimento de layouts, mas pode gerar confusão na cabeça de muitos, principalmente se você está começando agora no mundo do desenvolvimento front-end

Neste livro você vai entender e aprender como utilizar de forma simples as estruturas e propriedades do Flexbox de uma vez por todas.

O guia completo do Flexbox


A estrutura do layout flexível tende a gerar alguma confusão para quem estava acostumado a construir grids manualmente ou utilizando CSS.


E mesmo hoje, quase 3 anos após a definição padronizada do Flexbox pela W3C, ainda muita gente se assusta ou não faz ideia de como extrair todas as melhores funcionalidades que o layout flexível funciona.

Veja um trecho do guia:

Conceito

O conceito do layout flexível é justamente o que o nome sugere: Flexibilidade.


A ideia por trás do flexbox é que ele se comporte como a água, que se adapta ao recipiente.
E isso é extremamente útil em basicamente duas situações:

  • Layout responsivo: Quando uma mesma página web pode ser utilizada em dispositivos com resoluções bastante diferentes.
  • Layouts dinâmicos: Quando a exibição do conteúdo tende a mudar, como no caso de um quadro de fotos ou uma listagem de dados dinâmicos.
    Por exemplo: como o layout é exibido se existe um único item? E quando existem 2? E quando são 3?

Estrutura

Entender a estrutura do Flexbox é importantíssimo para dominar todas as funcionalidades que ele oferece.


De forma macro, o Flexbox se divide em 3 partes:

– Container

– Eixos

– Item

O container é o recipiente que contém o conteúdo flexível.

No CSS, este container é definido com display: flex;

Observe: Tudo o que estiver dentro do container se comportará como um item flexível.

Importante: Este comportamento não é herdado pelos itens flexíveis.

Para que um item flexível se comporte como um container flexível, a declaração display: flex; deve ser definida de forma explícita.

Essa funcionalidade é extremamente útil, pois possibilita termos controle total de como queremos renderizar todas as informações.

Você verá mais detalhes sobre isso adiante.

O container possui dois eixos, e isso define toda a estrutura de alinhamento e disposição dos elementos flexíveis.

Os eixos funcionam como no plano cartesiano que aprendemos na matemática: Um define a horizontal (a conhecida como reta X) e o outro a vertical (reta Y).

A grande sacada, é entender que é possível inverter a posição desses eixos.

Então, é importante lembrar que o flexbox trabalha com: Eixo principal e eixo transversal.

A definição do eixo é feita através da propriedade flex-direction. Que pode ser row (que é a padrão) ou column.

Saber qual a direção do container (qual eixo principal está definido para este container) é essencial para saber como os itens dentro do container irão se comportar.

Quando a definição de flex-direction é row, o eixo principal é o horizontal e o transversal é a vertical.

Quando flex-direction estiver definido como column, o eixo principal é a vertical, e o transversal é o eixo horizontal.

E essa definição impacta no comportamento de propriedades como:

– justify-content

– align-items

– align-content

– align-self

flex-basis

– flex-shrink

– flex-grow

Adquira este livro completo na Amazon por apenas R$ 9,90

Exemplo de formulário com Flexbox

Acesse no CodePen: Form com Pure CSS by dorian (@dorian_oliveiraoficial) on CodePen.

Gosto sempre de frisar: Treine sempre, pratique sempre. Estude, leia outros materiais e artigos.

Se quiser se se aprofundar no assunto, é só clicar neste link aqui embaixo e adquirir o livro direto na Amazon:

Continue lendo este livro clicando aqui