Category: Ebook Responsivo

Flexbox CSS3 – Guia para iniciantes

Flexbox CSS3 – Guia para iniciantes

Eae? Tudo bele?
Para quem está iniciando no desenvolvimento de interfaces web um dos maiores desafios é criar layouts. Isso porque se trata de um fundamento importante responsável por dar “cara” a interface e servir de “abrigo” para os conteúdos.
O que se espera de um profissional responsável por projetar layouts para aplicações e web sites? Você já pensou sobre isso? No mínimo que se conheça os principais métodos para layoutar e que com esses conhecimentos seja possível aplica-los em aspectos importantes do layout. Mas quais os principais métodos para isso?
No passado todo o processo de construção de layouts era concebido por tabelas HTML e recursos CSS como floats, posicionamentos, inline-blocks, entre outros, que podem ser considerados ultrapassados em relação a outros métodos que surgiram.
Um destes métodos mais modernos é um modelo conhecido como Flexbox ou Flexibe Box Layout e chegou para layoutar de forma a não se apoiar em comportamentos inadequados e sem as limitações que eram encontradas nos métodos mais antigos.
Nesse artigo você vai conhecer as propriedades que envolvem este incrível método para que você possa a partir de hoje praticar e aplicar em seus projetos. Então vamos nessa?
Para começa vamos saber exatamente o que é Flexbox.
O que é Flexbox?
Flexbox é um recurso CSS3 que serve de modelo para desenvolvimento de layouts para websites e aplicações web visando organizar elementos dentro de contêiners de forma flexível conforme sua necessidade.
E essa flexibilidade se caracteriza pela capacidade de alterar a largura e / ou a altura dos elementos (que são tratados como itens) para se adequarem ao espaço disponível em qualquer dispositivo de exibição. Um recipiente flexível expande os itens para preencher o espaço livre disponível ou encolhe-os para evitar o transbordamento.
Além disso, Flexbox permite que se alinhem os itens horizontalmente e verticalmente, ordenando-os em diferentes posições no layout independente de como aparecem no documento HTML, e também permite que disponha os itens na horizontal (linhas) e na vertical (colunas).
Com essas características do Flexbox com certeza você poderá construir layouts de forma dinâmica.
Flex Container e Flex itens
O que indica que um layout está utilizando Flexbox é definição da propriedade display de um contêiner, o Flex Container, com o valor flex, ou inline-flex. Veja o código a seguir.
Código CSS:.container {
display: flex;
}
Mas mesmo que esta propriedade esteja definida não quer dizer que Flexbox funcionará. Ele não funciona apenas declarando CSS para um único elemento HTML. Deve existir uma relação entre um elemento pai, o contêiner que recebe o display: flex; e pelo menos um filho para que a mágica aconteça.
Quando você declara no elemento pai o display: flex você está convertendo todos os elementos filhos, os Flex Itens, para se comportarem como caixas flexíveis. Detalhe importante; o elemento pai não se torna flexível ao menos que ele seja filho de outro elemento que recebeu display: flex;.
Um Flex Container possui termos que definem os tamanhos, eixos e direções aplicados, no caso da imagem a seguir, a uma linha.

Existe uma propriedade em particular chamada flex-direction, e que a entenderemos mais a frente, que dispõe os Flex Itens de um Flex Container ou no eixo horizontal (Main Axis) ou no eixo vertical (Cross Axis).
Por padrão, Main Axis, que é o Eixo principal está na horizontal e faz com que os Flex Itens se aninhem um ao lado do outro em uma linha, enquanto Cross Axis é o eixo secundário. Porém isso pode ser invertido para que Main Axis fique na vertical e os Flex Itens se aninhem um abaixo do outro em uma coluna.
Por padrão, ou melhor dizendo, quando Main Axis está na horizontal, main-size corresponde a largura, mas se setarmos Main Axis para horizontal main-size será a altura.
E também por padrão, podemos dizer que Main Axis começa no ponto extremo à esquerda (main-start) e termina a direita (main-end) e Cross Axis começa no ponto extremo acima (cross-start) e termina abaixo (cross-end).
Propriedades para Flex Container
Vou agora apresentar uma a uma as propriedades Flexbox que estilizam um elemento Flex Container:
display
A propriedade CSS display espeficica como elementos HTML devem ser apresentados em relação ao tipo de caixa de renderização.
Com o valor “flex” ou “inline-flex” atribuído a esta propriedade, o contêiner e se torna flexível. Consequentemente seus filhos se tornam Flex Itens. Veja os códigos a seguir.
Código HTML:<div class=”container”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
</div>
Código CSS:.container {
display: flex; /* ou inline-flex */
background-color: #cdf6eb;
margin: 20px auto;
max-width: 500px;
font-family: sans-serif;
}
.container div {
background: #028082;
margin: 8px 4px;
font-size: 1em;
color: #fff;
}
A seguir podemos ver os resultados usando o JSFiddle para versão com display: flex e, logo em seguida com display: inline-flex. Para melhor entendimento você pode navegar entre as abas result, HTML e CSS para ver o aspecto visual e a codificação usada.
1 – display: flex:

2 – display: inline-flex:

flex-direction
Flex-direction é aplicada no contêiner, mas define o fluxo de exibição que os Flex Itens serão dispostos. É esta propriedade que pode mudar o Eixo principal da posição horizontal (Flex Itens aninhados lado a lado em linha) para na vertical (Flex Itens aninhados um abaixo do outro em coluna). Conheça os possíveis valores para esta propriedade:

row: Este é o valor padrão, onde os itens são organizados para exibição em forma de linha da esquerda para a direita;
row-reverse: Os itens também são organizados em linha, só que em ordem reversa em relação ao valor anterior. Da direita para a esquerda;
column: Os itens são organizados em forma de colunas iniciando de cima para baixo;
column-reverse: Os itens são organizados em forma de colunas, só que iniciando de baixo para cima.

Vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>row</h4>
<div class=”container row”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
</div>
<h4>row-reverse</h4>
<div class=”container row-reverse”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
</div>
<h4>column</h4>
<div class=”container column”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
</div>
<h4>column-reverse</h4>
<div class=”container column-reverse”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 500px;
font-family: sans-serif;
}
.row {
flex-direction: row;
}
.row-reverse {
flex-direction: row-reverse;
}
.column {
flex-direction: column;
}
.column-reverse {
flex-direction: column-reverse;
}
.container div {
background: #028082;
height: 80px;
font-size: 1em;
color: #fff;
/* as proriedades a partir daqui alinham o texto no centro */
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.row div, .row-reverse div {
margin: 8px 4px;
width: 80px;
}
.column div, .column-reverse div {
margin: 8px;
}
h4 {
margin: 20px 0 0 20px;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver cada valor isoladamente no JSFiddle.

flex-wrap
A propriedade flex-wrap determina se um Flex Container é de linha única ou multilinhas. O que ocorre é que por padrão os Flex Itens tentarão se ajustar dentro de uma linha mesmo que ultrapassem visualmente a largura do elemento pai. O flex-wrap oferece a opção de quebra de linha para que os elementos filhos se ajustem adequadamente.
Conheça os possíveis valores para esta propriedade Flexbox:

nowrap: Este é o valor padrão. Com ele todos os itens inseridos dentro do Flex Container serão dispostos em uma linha mesmo que ultrapasse a largura do contêiner;
wrap: Ocorrerá a quebra de linha se alguns dos itens ultrapassar a largura do Flex Container. Os itens mais à direita serão deslocados para a linha de baixo;
wrap-reverse: Também ocorrerá a quebra de linha se alguns dos itens ultrapassar a largura do Flex Container, só que neste caso os itens mais à direita serão deslocados para a linha de cima.

Vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>nowrap</h4>
<div class=”container nowrap”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
</div>
<h4>wrap</h4>
<div class=”container wrap”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
</div>
<h4>wrap-reverse</h4>
<div class=”container wrap-reverse”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 500px;
font-family: sans-serif;
}
.nowrap {
flex-wrap: nowrap;
}
.wrap {
flex-wrap: wrap;
}
.wrap-reverse {
flex-wrap: wrap-reverse;
}
.container div {
background: #028082;
margin: 8px 4px;
width: 80px;
height: 80px;
font-size: 1em;
color: #fff;
/* as proriedades a partir daqui alinham o texto no centro */
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
h4 {
margin: 20px 0 0 20px;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver cada valor isoladamente no JSFiddle.

flex-flow
A propriedade flex-flow é um propriedade de declaração única para escrita das propriedades flex-direction e flex-wrap.
Ao usar as propriedades flex-direction e flex-wrap usualmente a declaração fica da seguinte forma:.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
Agora a forma abreviada com flex-flow:.container {
display: flex;
flex-flow: row wrap;
}
justify-content
Justify-content é uma propriedade que define o alinhamento dos Flex Itens ao longo do eixo principal do contêiner.

flex-start: Esse é o valor padrão. Os Flex Itens são alinhados a partir do início do contêiner;
flex-end: Os Flex Itens são alinhados a partir do fim do contêiner;
center: Os itens são alinhados ao centro do contêiner;
space-between: Cria um alinhamento uniforme entre os Flex Itens com um espaçamentos entre esses elementos. O primeiro item é deslocado para o início, e o último é deslocado para o final do contêiner;
space-around: Os Flex Itens também são uniformemente distribuídos ao longo contêiner, onde é criado um espaçamento ao redor dos elementos. Com isso, o primeiro e o último item possuirão margens e não ficaram grudados as extremidades do contêiner.

Vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>flex-start</h4>
<div class=”container flex-start”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
</div>
<h4>flex-end</h4>
<div class=”container flex-end”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
</div>
<h4>center</h4>
<div class=”container center”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
</div>
<h4>space-between</h4>
<div class=”container space-between”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
</div>
<h4>space-around</h4>
<div class=”container space-around”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 500px;
font-family: sans-serif;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.center {
justify-content: center;
}
.space-between {
justify-content: space-between;
}
.space-around {
justify-content: space-around;
}
.container div {
background: #028082;
margin: 8px 4px;
height: 80px;
width: 80px;
font-size: 1em;
color: #fff;
/* as proriedades a partir daqui alinham o texto no centro */
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
h4 {
margin: 20px 0 0 20px;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver cada valor isoladamente no JSFiddle.

align-items
Align-items é uma propriedade que define como os Flex Itens serão distribuídos ao longo do eixo transversal do contêiner. Conheça os possíveis valores para esta propriedade:

stretch: Esse é o valor padrão. Neste caso os Flex Itens serão esticados para preencher toda a dimensão do eixo transversal igualmente;
flex-start: Desloca os Flex Itens para o início do eixo transversal;
flex-end: Desloca os Flex Itens para o final do eixo transversal;
center: Os Flex Itens são centralizados no eixo transversal;
baseline: Alinha os Flex Itens a partir da base da primeira linha de texto de cada um deles.

Vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>stretch</h4>
<div class=”container stretch”>
<div class=”item_1″>Este bloco que se inicia é correspondente ao Item 1</div>
<div class=”item_2″>Este é o bloco dois!!!</div>
<div class=”item_3″>Item 3</div>
</div>
<h4>flex-start</h4>
<div class=”container flex-start”>
<div class=”item_1″>Este bloco que se inicia é correspondente ao Item 1</div>
<div class=”item_2″>Este é o bloco dois!!!</div>
<div class=”item_3″>Item 3</div>
</div>
<h4>flex-end</h4>
<div class=”container flex-end”>
<div class=”item_1″>Este bloco que se inicia é correspondente ao Item 1</div>
<div class=”item_2″>Este é o bloco dois!!!</div>
<div class=”item_3″>Item 3</div>
</div>
<h4>center</h4>
<div class=”container center”>
<div class=”item_1″>Este bloco que se inicia é correspondente ao Item 1</div>
<div class=”item_2″>Este é o bloco dois!!!</div>
<div class=”item_3″>Item 3</div>
</div>
<h4>baseline</h4>
<div class=”container baseline”>
<div class=”item_1″>Este bloco que se inicia é correspondente ao Item 1</div>
<div class=”item_2″>Este é o bloco dois!!!</div>
<div class=”item_3″>Item 3</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 400px;
font-family: sans-serif;
}
.stretch {
align-items: stretch;
}
.flex-start {
align-items: flex-start;
}
.flex-end {
align-items: flex-end;
}
.center {
align-items: center;
}
.baseline {
align-items: baseline;
}
.container div {
background: #028082;
margin: 8px 4px;
width: 80px;
font-size: 1em;
color: #fff;
flex: 1;
/* as proriedades a partir daqui alinham o texto no centro */
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
h4 {
margin: 20px 0 0 20px;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver cada valor isoladamente no JSFiddle.

align-content
Align-content é uma propriedade que define como as linhas são distribuídas ao longo do eixo transversal do contêiner. Conheça os possíveis valores para esta propriedade:

stretch: Este é o valor padrão. As linhas são distribuídas uniformemente ao longo do eixo transversal.
flex-start: Distribui as linhas a partir do início do eixo transversal;
flex-end: Distribui as linhas a partir do fim do eixo transversal;
center: Mantém as linhas no centro do eixo transversal;
space-between: Cria um espaçamento entre as linhas. Onde a primeira linha é deslocada para o início do eixo transversal, a última é deslocada para o final do eixo transversal;
space-around: As linhas são uniformemente distribuídos ao longo do eixo transversal, onde é criado um espaçamento ao redor delas. Com isso, a primeira e o última linha possuirão margens e não ficaram grudadas as extremidades do contêiner.

Vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>stretch</h4>
<div class=”container stretch”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
<div class=”item_9″>Item 9</div>
<div class=”item_10″>Item 10</div>
<div class=”item_11″>Item 11</div>
<div class=”item_12″>Item 12</div>
<div class=”item_13″>Item 13</div>
<div class=”item_14″>Item 14</div>
<div class=”item_15″>Item 15</div>
<div class=”item_16″>Item 16</div>
</div>
<h4>flex-start</h4>
<div class=”container flex-start”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
<div class=”item_9″>Item 9</div>
<div class=”item_10″>Item 10</div>
<div class=”item_11″>Item 11</div>
<div class=”item_12″>Item 12</div>
<div class=”item_13″>Item 13</div>
<div class=”item_14″>Item 14</div>
<div class=”item_15″>Item 15</div>
<div class=”item_16″>Item 16</div>
</div>
<h4>flex-end</h4>
<div class=”container flex-end”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
<div class=”item_9″>Item 9</div>
<div class=”item_10″>Item 10</div>
<div class=”item_11″>Item 11</div>
<div class=”item_12″>Item 12</div>
<div class=”item_13″>Item 13</div>
<div class=”item_14″>Item 14</div>
<div class=”item_15″>Item 15</div>
<div class=”item_16″>Item 16</div>
</div>
<h4>center</h4>
<div class=”container center”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
<div class=”item_9″>Item 9</div>
<div class=”item_10″>Item 10</div>
<div class=”item_11″>Item 11</div>
<div class=”item_12″>Item 12</div>
<div class=”item_13″>Item 13</div>
<div class=”item_14″>Item 14</div>
<div class=”item_15″>Item 15</div>
<div class=”item_16″>Item 16</div>
</div>
<h4>space-between</h4>
<div class=”container space-between”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
<div class=”item_9″>Item 9</div>
<div class=”item_10″>Item 10</div>
<div class=”item_11″>Item 11</div>
<div class=”item_12″>Item 12</div>
<div class=”item_13″>Item 13</div>
<div class=”item_14″>Item 14</div>
<div class=”item_15″>Item 15</div>
<div class=”item_16″>Item 16</div>
</div>
<h4>space-around</h4>
<div class=”container space-around”>
<div class=”item_1″>Item 1</div>
<div class=”item_2″>Item 2</div>
<div class=”item_3″>Item 3</div>
<div class=”item_4″>Item 4</div>
<div class=”item_5″>Item 5</div>
<div class=”item_6″>Item 6</div>
<div class=”item_7″>Item 7</div>
<div class=”item_8″>Item 8</div>
<div class=”item_9″>Item 9</div>
<div class=”item_10″>Item 10</div>
<div class=”item_11″>Item 11</div>
<div class=”item_12″>Item 12</div>
<div class=”item_13″>Item 13</div>
<div class=”item_14″>Item 14</div>
<div class=”item_15″>Item 15</div>
<div class=”item_16″>Item 16</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 500px;
height: 300px;
font-family: sans-serif;
flex-wrap: wrap;
}
.stretch {
align-content: stretch;
}
.flex-start {
align-content: flex-start;
}
.flex-end {
align-content: flex-end;
}
.center {
align-content: center;
}
.space-between {
align-content: space-between;
}
.space-around {
align-content: space-around;
}
.container div {
background: #028082;
margin: 8px 4px;
font-size: 1em;
color: #fff;
}
h4 {
margin: 20px 0 0 20px;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver cada valor isoladamente no JSFiddle.

Propriedades para Flex Itens
Vou agora apresentar uma a uma as propriedades que estilizam Flex Itens:
flex-grow
A propriedade flex-grow serve para especificar o fator de crescimento que um Flex Item terá em relação aos outros Flex Itens encontrados em um Flex Container. O valor especificado deve ser um número positivo. Por padrão o valor de flex-grow é 0, ou seja, os Flex Itens não crescem.
Quanto maior o valor de flex-grow, mais o Flex Item poderá crescer relativamente aos outros items. Para entender melhor imagine que você possui em uma linha de um contêiner 3 Flex Itens. Dois deles foram determinados flex-grow: 1, e um flex-grow: 2. O flex-grow: 2 tentará ocupar duas vezes mais espaço do espaço disponível que os outros itens.
Uma coisa que não devemos nos confundir é sobre a dimensão do quanto de espaço que um Flex Item tentará ocupar. Não é porque um flex-grow tenha um fator de crescimento 2 que ele terá o dobro de ocupação. Existe um cálculo envolvendo este fator mais o espaço disponível que determina quanto de largura, caso flex-direction: row, ou altura, caso flex-direction: column, um Flex Item deve ter.
Imagine o exemplo anterior onde um Flex Item tem o flex-grow: 2 e os outros dois tem flex-grow: 1. Vamos estipular para esses três Flex Itens uma largura de 100 pixels (flex-basis: 100px;) onde o contêiner, elemento pai destes itens tem uma largura (width) de 500 pixels.
O flex-grow quando possui valor acima de 0 faz com que os Flex Itens cresçam (se flex-wrap: wrap, não estiver declarado) para ocupar a largura do contêiner. Ou seja, os três Flex Itens, mesmo com a somas das larguras declaradas dando 300 pixels se distribuem para ocupar a largura de 500 pixels do contêiner. E aí que entra o cálculo da unidade de crescimento.
Observação: flex-basis, citado no parágrafo anterior, será melhor explicado no próximo tópico. Enquanto isso basta saber que esta propriedade define o tamanho inicial (largura ou altura) que um Flex Item deve ter antes que o espaço ao seu redor seja distribuído por outras propriedades.
Unidade de crescimento = espaço disponível / soma dos fatores de crescimento de todos itens
Sendo que, espaço disponível é o valor da largura do Flex Container (500 pixels) menos a soma das largura dos Flex Itens (300 pixels). Ou seja 200 pixels. E a soma dos fatores de crescimento dos Flex Itens é 4. Agora aplicando na fórmula:
Unidade de crescimento = 200px / 4 = 50px.
Agora para saber quanto cada Flex Item cresceu basta multiplicar o fator de crescimento por 50 pixels e somar pela largura (flex-basis: 100px;).
Resultado:
1 – Flex Itens com flex-grow: 1: (50px x 1) + 100px = 150 pixels.
2 – Flex Item com flex-grow: 2: (50px x 2) + 100px = 200 pixels.
Agora vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>flex-grow: 0;</h4>
<div class=”container”>
<div class=”grow_0″>Item 1</div>
<div class=”grow_0″>Item 2</div>
<div class=”grow_0″>Item 3</div>
<div class=”grow_0″>Item 4</div>
</div>
<h4>flex-grow: 1;</h4>
<div class=”container”>
<div class=”grow_1″>Item 1</div>
<div class=”grow_1″>Item 2</div>
<div class=”grow_1″>Item 3</div>
<div class=”grow_1″>Item 4</div>
</div>
<h4>flex-grow: 0; e flex-grow: 2;</h4>
<div class=”container”>
<div class=”grow_0″>Item 1</div>
<div class=”grow_2″>Item 2</div>
<div class=”grow_0″>Item 3</div>
<div class=”grow_0″>Item 4</div>
</div>
<h4>flex-grow: 0; | flex-grow: 2 | flex-basis: 100px ;</h4>
<div class=”container”>
<div class=”grow_1 basis”>Item 1</div>
<div class=”grow_2 basis”>Item 2</div>
<div class=”grow_1 basis”>Item 3</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 500px;
font-family: sans-serif;
flex-wrap; wrap;
}
.grow_0 {
flex-grow: 0;
}
.grow_1 {
flex-grow: 1;
}
.grow_2 {
flex-grow: 2;
}

.container div {
background: #028082;
margin: 8px 4px;
height: 80px;
font-size: 1em;
color: #fff;
/* as proriedades a partir daqui alinham o texto no centro */
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}

h4 {
margin: 20px 0 0 20px;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver os resultados no JSFiddle.

flex-basis
Como já citado anteriormente, flex-basis define o tamanho inicial que um Flex Item deve ter antes que o espaço ao seu redor seja distribuído por outras propriedades. No caso flex-grow e flex-shrink, está útltima ainda a ser retratada nesta artigo.
Quando o eixo principal for horizontal, esta propriedade define a largura mínima antes que espaço restante seja distribuído, quando for vertical defina e altura mínima.
Por padrão seu valor é auto (flex-basis: auto) que quer dizer ao tamanho da largura (ou altura) do Flex Item. Caso se para esse Flex Item não for determinado um tamanho de width, caso o eixo principal for horizontal, ou height, caso vertical, então flex-basis: auto; equivalerá ao tamanho do conteúdo.
Além do valor auto, esta propriedade também pode receber valores para dimensões, como pixels e porcentagens.
Agora vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>flex-basis: auto (flex-grow: 1; procurará distribuir os itens para ocupar o espaço do contêiner);</h4>
<div class=”container”>
<div class=”grow_1 basis_auto”>Item 1</div>
<div class=”grow_1 basis_auto”>Item 2</div>
<div class=”grow_1 basis_auto”>Item 3</div>
<div class=”grow_1 basis_auto”>Item 4</div>
</div>
<h4>flex-basis: auto (Com flex-grow: 0; os itens não ocuparão o espaço do contêiner e a largura deles será equivalente ao tamanho do conteúdo)</h4>
<div class=”container”>
<div class=”grow_0 basis_auto”>Item 1</div>
<div class=”grow_0 basis_auto”>Item 2</div>
<div class=”grow_0 basis_auto”>Item 3</div>
<div class=”grow_0 basis_auto”>Item 4</div>
</div>
<h4>flex-basis: 125px;</h4>
<div class=”container”>
<div class=”grow_1 basis_125″>Item 1</div>
<div class=”grow_1 basis_125″>Item 2</div>
<div class=”grow_1 basis_125″>Item 3</div>
<div class=”grow_1 basis_125″>Item 4</div>
</div>
<h4>flex-basis: 100px (A somatória da largura dos Flex Itens é igual a 400 pixels. Mas mesmo assim flex-grow: 1; fará que os itens ocupem o espaço de 500 pixels do contêiner);</h4>
<div class=”container”>
<div class=”grow_1 basis_100″>Item 1</div>
<div class=”grow_1 basis_100″>Item 2</div>
<div class=”grow_1 basis_100″>Item 3</div>
<div class=”grow_1 basis_100″>Item 4</div>
</div>
<h4>flex-basis: 100px (Com flex-grow: 0; os itens não ocuparão o espaço do contêiner e a largura deles será equivalente ao tamanho do conteúdo)</h4>
<div class=”container”>
<div class=”grow_0 basis_100″>Item 1</div>
<div class=”grow_0 basis_100″>Item 2</div>
<div class=”grow_0 basis_100″>Item 3</div>
<div class=”grow_0 basis_100″>Item 4</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 500px;
font-family: sans-serif;
flex-wrap; wrap;
}
.grow_0 {
flex-grow: 0;
}
.grow_1 {
flex-grow: 1;
}
.basis_auto {
flex-basis: auto;
}
.basis_100 {
flex-basis: 100px;
}
.basis_125 {
flex-basis: 125px;
}
.container div {
background: #028082;
margin: 8px 4px;
height: 80px;
font-size: 1em;
color: #fff;
/* as proriedades a partir daqui alinham o texto no centro */
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
h4 {
margin: 20px 0 0 20px;
padding: 0 6%;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver os resultados no JSFiddle.

flex-shrink
Enquanto no flex-grow define a capacidade dos Flex Itens de crescerem o flex-shrink faz exatamente o contrário ele define a redução, ou seja, ele serve para especificar o fator de encolhimento que um Flex Item terá em relação aos outros Flex Itens encontrados em um Flex Container.
Por padrão o valor de flex-shrink é 1, ou seja, os Flex Itens reduzem de tamanho para caber dentro do espaço disponível no contêiner.
Quanto maior o valor de flex-shrink, mais o Flex Item poderá reduzir de tamanho relativamente aos outros items.
E em qual situação o flex-shrink reduz o tamanho dos Flex Itens? Quando o espaço disponível é negativo, ou seja, quando a somatória das larguras (ou alturas, se o eixo principal for na vertical) dos Flex Itens ultrapassar o tamanho do Flex Container.
Com isso deduzimos que também existe uma formula para sabermos em quanto os Flex Itens são reduzidos para caber no container.
Unidade de encolhimento = espaço disponível / soma dos fatores de encolhimento de todos itens
Sendo que, espaço disponível é o valor da largura do Flex Container menos a soma das largura dos Flex Itens. O que resulta em um valor negativo.
Vamos imagina a seguinte situação. Temos um Flex Container com 500 pixels enquanto a largura dos Flex Itens somadas dá 800 pixels (flex-basis: 200px; para cada um de quatro itens) e a soma dos fatores de encolhimento de todos eles é 5 (um deles possui fator 2 e os restantes fator 1). Vamos transpor esses valore à formula.
Unidade de encolhimento = (500px – 800px) / 5 = -60 pixels;
Agora para saber quanto cada Flex Item encolheu basta multiplicar o fator de encolhimento por -60 pixels e somar pela largura (flex-basis: 100px;).
Resultado:
1 – Flex Itens com flex-shrink: 1: (-60px x 1) + 200px = 140 pixels.
2 – Flex Item com flex-shrink: 2: (-60px x 2) + 200px = 80 pixels.
Agora vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>flex-shrink com valor maior que zero define que Flex Itens devem encolher para caber no contêiner;</h4>
<div class=”container”>
<div class=”shrink_1 basis”>Item 1</div>
<div class=”shrink_2 basis”>Item 2</div>
<div class=”shrink_1 basis”>Item 3</div>
<div class=”shrink_1 basis”>Item 4</div>
</div>
<h4>flex-shrink: 0; (Flex Itens não encolhem)</h4>
<div class=”container”>
<div class=”shrink_0 basis”>Item 1</div>
<div class=”shrink_0 basis”>Item 2</div>
<div class=”shrink_0 basis”>Item 3</div>
<div class=”shrink_0 basis”>Item 4</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 500px;
font-family: sans-serif;
flex-wrap; wrap;
}
.shrink_0 {
flex-shrink: 0;
}
.shrink_1 {
flex-shrink: 1;
}
.shrink_2 {
flex-shrink: 2;
}
.basis {
flex-basis: 200px;
}
.container div {
background: #028082;
margin: 8px 4px;
height: 80px;
font-size: 1em;
color: #fff;
/* as proriedades a partir daqui alinham o texto no centro */
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
h4 {
margin: 20px 0 0 20px;
padding: 0 6%;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver os resultados no JSFiddle.

flex
Esta é a abreviatura para flex-grow, flex-shrink, flex-basis combinados nesta sequencia. O padrão é flex: 0 1 auto;. O uso da abreviatura é recomendada em vez de definir as propriedades separadamente..item {
flex: 0 1 auto;
}
A declaração acima faz do flex item inflexível quando há espaço disponível no contêiner, mas permite encolher quando há espaço insuficiente.
order
O padrão faz com que os Flex Itens aparecem no contêiner na ordem que são inseridos no HTML. Mas essa ordem pode ser alterada através da propriedade order sendo que se inicia de uma valor menor para o maior. O valor inicial de order é 0 e também é possível especificar valores negativos.
Agora vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>order – exemplo 1</h4>
<div class=”container row”>
<div class=”grow_1 order_3″>Item 1</div>
<div class=”grow_1″>Item 2</div>
<div class=”grow_1 order_4″>Item 3</div>
<div class=”grow_1 order_2″>Item 4</div>
</div>
<h4>order – exemplo 2</h4>
<div class=”container row”>
<div class=”grow_1 order_2″>Item 1</div>
<div class=”grow_1 order_4″>Item 2</div>
<div class=”grow_1 order_2″>Item 3</div>
<div class=”grow_1 order_menosUm”>Item 4</div>
</div>
<h4>order – exemplo 3</h4>
<div class=”container column”>
<div class=”grow_1 order_2″>Item 1</div>
<div class=”grow_1″>Item 2</div>
<div class=”grow_1 order_4″>Item 3</div>
<div class=”grow_1 order_2″>Item 4</div>
</div>
<h4>order – exemplo 3</h4>
<div class=”container column”>
<div class=”grow_1 order_3″>Item 1</div>
<div class=”grow_1 order_4″>Item 2</div>
<div class=”grow_1 order_2″>Item 3</div>
<div class=”grow_1 order_menosUm”>Item 4</div>
</div>
Código CSS:.container {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 500px;
font-family: sans-serif;
flex-wrap; wrap;
}
.order_menosUm {
order: -1;
}
.order_1 {
order: 1;
}
.order_2 {
order: 2;
}
.order_3 {
order: 3;
}
.order_4 {
order: 4;
}
.grow_1 {
flex-grow: 1
}
.column {
flex-direction: column;
}
.container div {
background: #028082;
height: 80px;
font-size: 1em;
color: #fff;
/* as proriedades a partir daqui alinham o texto no centro */
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.row div {
margin: 8px 4px;
width: 80px;
}
.column div {
margin: 8px;
}
h4 {
margin: 20px 0 0 20px;
padding: 0 2%;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver os resultados no JSFiddle.

align-self
Esta propriedade permite definir um alinhamento de um único Flex Item dentro de um contêiner sobrescrevendo o que foi definido no align-itens do Flex Container. Conheça os possíveis valores para esta propriedade:

auto: Este é o valor padrão. Com ele declarado o comportamento definido no container por meio do align-items é respeitado.
stretch: Neste caso o item será esticado para preencher toda a dimensão do eixo transversal (largura ou altura) igualmente;
flex-start: Desloca o item para o início do eixo transversal;
flex-end: Desloca o item para o final do eixo transversal;
center: O item é centralizado no eixo transversal;
baseline: Alinha o item a partir da base da primeira linha de texto de dos demais itens.

Vamos a alguns exemplos de aplicação em códigos.
Código HTML:<h4>Todo os valores de align-self + algin-items: flex-end</h4>
<div class=”container1 align-items_flex-end”>
<div class=”item_1″>Item 1</div>
<div class=”item_2 stretch”>Item 2</div>
<div class=”item_3 flex-start”>Item 3</div>
<div class=”item_4 flex-end”>Item 4</div>
<div class=”item_4 center”>Item 5</div>
<div class=”item_6 baseline”>Item 6</div>
</div>
<h4>Todo os valores de align-self + algin-items: flex-end</h4>
<div class=”container2 align-items_flex-end column”>
<div class=”item_1″>Item 1</div>
<div class=”item_2 stretch”>Item 2</div>
<div class=”item_3 flex-start”>Item 3</div>
<div class=”item_4 flex-end”>Item 4</div>
<div class=”item_4 center”>Item 5</div>
<div class=”item_6 baseline”>Item 6</div>
</div>
Código CSS:.container1, .container2 {
display: flex;
background-color: #cdf6eb;
margin: 10px auto 30px;
max-width: 400px;
font-family: sans-serif;
}
.container1 {
height: 100px;
}
.stretch {
align-self: stretch;
}
.flex-start {
align-self: flex-start;
}
.flex-end {
align-self: flex-end;
}
.center {
align-self: center;
}
.baseline {
align-self: baseline;
}
.align-items_flex-end {
align-items: flex-end;
}
.column {
flex-direction: column;
}
.container1 div, .container2 div {
background: #028082;
margin: 4px;
font-size: 1em;
color: #fff;
}
h4 {
margin: 20px 0 0 20px;
font-family: sans-serif;
font-weight: normal;
font-size: 1em;
color: #3b3b3b;
text-align: center;
}
Agora vamos ver os resultados no JSFiddle.

Conclusão sobre Flexbox
Podemos concluir que o uso de Flexbox aperfeiçoa ainda mais a forma como desenvolvemos layouts por causa de suas características avançadas de como manipular os itens.
O próximo passo após a leitura deste artigo e praticar cada propriedade mencionada. Até aqui tivemos uma pincelada sobre aspectos introdutórios deste método. Para uma pesquisa mais avançada você pode recorrer a documentação W3C.
Uma observação importante: O mundo do desenvolvimento web sempre avança e sempre tem coisa nova. Quando falamos de CSS então sabemos que ele teveum avanço significativo nos últimos tempos. Tanto que quando falamos de layouts temos um recurso semelhante e mais atual ao Flexbox chamado CSS Grid Layout e que possui um artigo aqui no blog que sugiro que leia. E porque estou citando ele?
Porque rapidamente é importante que você saiba que ambos trabalham com a construção de layout e que existe uma diferença fundamental entre eles.
O Flexbox destina-se a layouts unidimensionais mais simples que possam ser dispostos em linha reta. É mais apropriado para os componentes de um aplicativo e layouts em pequena escala.
Já o CSS Grid Layout destina-se a layouts bidimensionais mais complexos. É adequado para organizar a estrutura de layout de elementos de nível mais alto, como cabeçalhos, rodapés, sidebar e seções.
Tendo isso esclarecido, agora me diga o que achou do Flexbox. Já utilizou alguma vez em seus projetos? Deixe sua opinião e aproveite e compartilhe sobre esse assunto com seus amigos!
Forte abraço.
Até mais.
Referências:


https://www.w3.org/TR/css-flexbox-1/

A Complete Guide to Flexbox


http://desenvolvimentoparaweb.com/css/flexbox/
https://www.devmedia.com.br/css3-flexbox-funcionamento-e-propriedades/29532
Imagem:
https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg
The post Flexbox CSS3 – Guia para iniciantes appeared first on Chief of Design.

Flexbox CSS3 – Guia para iniciantes
Fonte: Chef of Design

CSS3 Animation – Tutorial para iniciantes

CSS3 Animation – Tutorial para iniciantes

Eae? Tudo bele?
Hoje em dia é muito comum vermos em muitos sites animações de em diferentes formatos. Elas, quando usadas de forma adequada, atraem atenção e criam um ambiente de interatividade. E graças ao CSS3 Animation ficou mais fácil criá-las.
Há um tempo não tão longo assim, teríamos nos apoiados apenas em ferramentas como o Flash e o Javascript para criar animações que rodassem no navegador. Mas graças aos navegadores modernos hoje temos suporte para trabalhar com CSS e a especificamente com a propriedade CSS3 Animation que possibilita construir animações também com um bom controle.
Você gostaria de aprender a criar animações CSS que impactassem em seus projetos?
Neste artigo trago uma introdução a propriedade CSS que pode trazer mais vida aos seus sites através de animações. Bem-vindo ao mundo da CSS 3 Animation.
CSS3 Animation: Propriedade da animation
Animation é uma propriedade CSS que serve basicamente para animar outras propriedades CSS. Como exemplo, ela é capaz de animar propriedades como a width, a height e a background-color, que respectivamente, são responsáveis pela largura, altura e cor de fundo um elemento HTML.
Esta propriedade torna possível animar uma transição de um estilo CSS para outro.
A seguir podemos ver duas animações básicas de uma transição entre duas cores de fundo usando o JSFiddle. Para melhor entendimento você pode navegar entre as abas result, HTML e CSS para ver o aspecto visual e a codificação usada.
Animação 1:

Animação 2:

Observação: Tirando o fato que usamos cores de fundo diferentes para diferenciar os exemplos o comportamento obtido é o mesmo, só que com codificações diferentes. O primeiro usou os seletores from e to, enquanto o segundo usou os seletores de porcentagens 0% e 100%. Esses seletores exemplificados têm a mesma função de definir um estágio inicial e um final.
Para que tudo funcione é preciso que você declare um nome de sua escolha para a regra @keyframes, esta denominação deve ser chamada como um valor da propriedade abreviada animation. Veja que no exemplo anterior definimos a regra como o nome “elemento”.@keyframes elemento {

E chamamos o valor declarado como um dos valores na propriedade animation..animate {
animation: elemento 10s infinite;

Mais à frente veremos que este valor é atribuído separadamente a propriedade animation-name.
CSS3 Animation: Regra @keyframes
A regra @keyframes possibilita definir o que acontecerá nos momentos que você especifica para sua animação. Imagine que você pretende que um elemento receba um estilo no começo da animação, 0%, e no final, 100%. Esses estágios definidos são, quadros-chave.
E não tão somente é possível animar nos dois pontos, inicial e final, mas também pontos intermediários a sua escolha (15%, 23%, 60%, 99%, entre outros).
Basicamente na regra @keyframes contamos com a declaração do nome de sua escolha, os estágios definidos por você e os estilos que serão aplicados quando um estágio especificado for atingido.
Variações da propriedade animation
Tendo especificada a regra @keyframes, então os estágios podem ser controlados pela propriedade abreviada animation ou suas oito variações que possibilitam mais controle sobre os estágios definidos. A seguir vamos conhecer as variações da propriedade animation.
Animation-name
Esta propriedade declara o nome da regra @keyframes que devemos manipular.
Sintaxe CSS:animation-name: elemento;
Animation-duration
Com esta propriedade se define o tempo necessário para que uma animação complete um ciclo.
Sintaxe CSS:animation-duration: 2s;
Sintaxe CSS com propriedade abreviada:animation: elemento 2s;
Animation-timing-function
Estabelece curvas de aceleração da animação. Você pode especificar com valores preestabelecidos: ease, linear, ease-in, ease-out, ease-in-out, initial, inherit. Ou criar funções de temporização personalizadas usando cubic-bezier curve.
Sintaxe CSS:animation-timing-function: ease-in;
Sintaxe CSS com propriedade abreviada:animation: elemento 2s ease-in;
Se nenhum valor for atribuído à propriedade o valor padrão é ease.
Animation-delay
Aqui definimos o tempo entre o elemento que está sendo carregado e o início da sequência de animação.
Sintaxe CSS:animation-delay: 3s;
Sintaxe CSS com propriedade abreviada:animation: elemento 2s ease-in 3s;
Animation-direction
Esta propriedade define a direção da animação após o ciclo. Você pode estipular os seguintes valores:

normal: Este é o valor padrão – A animação é reproduzida. Em cada ciclo, a animação volta ao estado inicial (0%) e reproduz-se novamente (até 100%).
reverse – Com este valor a animação é reversa. Em cada ciclo, a animação volta ao estado final (100%) e é reproduzida para trás (para 0%).
alternate – Neste caso a animação inverte a direção em cada ciclo. Em cada ciclo ímpar, a animação é reproduzida (0% a 100%). Em cada ciclo par, a animação é reproduzida (100% a 0%).
alternate-reverse – Aqui a animação também inverte a direção em cada ciclo. Só que a diferença é que m cada ciclo ímpar, a animação é reproduzida no reverso (100% a 0%), enquanto em cada ciclo par, a animação é reproduzida (0% ou 100%).

Sintaxe CSS:animation-direction: reverse;
Sintaxe CSS com propriedade abreviada:animation: elemento 2s ease-in 3s reverse;
Animation-iteration-count
Essa propriedade define o número de vezes que a animação deve ser realizada.
Você pode estipular os seguintes valores:

Um número específico determinado por você que quantificará as vezes que a animação deve-se repetir. O padrão é 1.
infinite – a animação se repete para sempre.
initial – define a contagem para o valor padrão
inherit – herda o valor do elemento pai.

Sintaxe CSS:animation-iteration-count: infinite;
Sintaxe CSS com propriedade abreviada:animation: elemento 2s ease-in 3s reverse infinite;
Animation-fill-mode
Esta propriedade define quais valores são aplicados antes e depois da animação. Com ele podemos definir que o último estado da animação, ou seja, os estilos aplicados ao estágio 100% permaneçam na tela (forwards), ou definimos que antes da animação os estilos aplicados ao estágio inicial são aplicados ao elemento (backwards).
Também é possível que esses comportamentos de aplicações de estilos antes e depois da animação sejam aplicados em conjunto (both).
Você pode estipular os seguintes valores:

forwards;
backwards;
both;
normal – Este é o valor padrão onde a animação não aplica nenhum estilo ao elemento, antes ou depois da animação.

Sintaxe CSS:animation-fill-mode: forwards;
Sintaxe CSS com propriedade abreviada:animation: elemento 2s ease-in 3s reverse infinite forwards;
Animation-play-state
Esta propriedade especifica se a animação está tocando ou pausada. Você pode estipular os seguintes valores:

paused – A animação está pausada;
running – A animação está rodando
initial – define a contagem para o valor padrão;
inherit – herda o valor do elemento pai.

Sintaxe CSS:animation-play-state: forwards;
Sintaxe CSS com propriedade abreviada:animation: elemento 2s ease-in 3s reverse infinite forwards running;
As codificações acima considerado todos os valores possíveis de animation que também poderia ser representa da seguinte forma:.animate {
animation-name: elemento;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-delay: 3s;
animation-direction: reverse;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-play-state: forwards;
}
Aplicando CSS3 Animation com os conhecimentos adquiridos
Agora vamos para  uma aplicação do CSS3 animation. E para não haver confusão, vamos dividir a codificação em duas etapas:
A primeira será a etapa da especificação da regra @keyframes e a segunda a definição dos estilos da propriedade animation e demais estilos se necessário.
Para aplicar essas ações vamos construir uma animação básica com elementos geométricos básicos. Entretanto para animações de um elemento ou elementos mais complexos talvez você tenha que esboçar em um papel ou software gráfico as transformações que ocorrerão em cada estágio da animação.
O elemento a ser animado segue a seguinte estrutura HTML:<div class=”scale”>
</div>
Nosso exemplo iniciará apresentando um elemento de cor avermelhada e quadrado, que ao decorrer do tempo vai aumentando de tamanho, que vai simultaneamente deslocando-se para direita e arredondando suas bordas até chegar a um estágio onde assume uma cor azulada e formato circular. E ao decorrer de mais tempo faz o processo inverso (alterna a animação) até retornar ao ponto de origem. Esse processo estará definido para se repetir infinitamente.
Primeira etapa – Regra @keyframes
Nesta etapa são especificados os estágios que recebem os estilos que definem a aparência e o comportamento do elemento.
Essa etapa será dividida em 3 passos:

O nome declarado da animação (@keyframes) – No nosso caso será “elemento”.
Estágios da animação – Os estágios da animação podem ser representados por porcentagem. No nosso caso terão dois. Um inicial, 0% e outro final, 100%. Sua animação pode ter a quantidade maior de estágios se necessário.
Propriedades CSS – As propriedades que estilizam o elemento animado em cada estágio.

Segue o código para @keyframes:@keyframes elemento {
0% {
background-color: #fb2b49;
margin-left: 0;
width:1px;
height:1px;
}
100% {
background-color: #bbefbf;
margin-left: 90%;
border-radius: 50%;
width:150px;
height:150px;
}
}
Como podemos ver no estágio inicial (0%) e o elemento recebe tamanho de 1 pixel por 1 pixel, recebe também uma cor avermelhada e fica posicionado à esquerda. Conforme a animação for ativada ele gradativamente vai aumentando de tamanho, arredondando as bordas e mudando de cor até atingir a largura e altura de 150 pixels, a cor azulada e formato circular pela propriedade border-radius.
Segunda etapa – Estilos da propriedade animation
É neste processo que chamamos o valor de animation-name (elemento) que foi declarado na @keyframes e que se defina as outras propriedades de animação para que tudo funcione.
Segue o código relativo a propriedade animation:.scale {
animation: elemento 5s ease-in 0s alternate infinite none running;
}
Podemos ver na declaração CSS que chamamos “elemento” para que as propriedades animem os estágios estilizados nas @keyframes. Também foi definido que o ciclo da animação deve durar 5 segundos, que a curva de aceleração da animação definida como “easy-in”, que a animação deve ter ciclo alternados e repetir infinitamente.
Veja agora o resultado no JSFiddle logo a seguir. Para melhor entendimento você pode navegar entre as abas result, HTML e CSS para ver o aspecto visual e a codificação usada.
.
Suporte aos navegadores

No momento que escrevo este artigo (Ourubro de 2017) a grande maioria dos navegadores modernos suportam o CSS3 Animation conforme podemos ver no suporte Can I Use ( ). A única exceção é o Opera Mini.
Fontes para você se inspirar e começar a utilizar CSS3 Animation
Para você ter uma noção de como a propriedade CSS animation trabalha a seguir mostro alguns trabalhos que aplicam de forma avançada as animações.
Pure CSS Twitter ‘Fail Whale’

Este é uma versão animada de Steve Dennis baseada da Baleia da Falha que aparece quando surge algum problema no Twitter. Visite clicando aqui »
Full CSS 3D Solar System

Neste exemplo temos um Sistema Solar completo 3D criado por Wayne Dinkley criado no Codepen. Visite clicando aqui »
CSS Creatures

Esse é um site que apresenta criaturas feitas com puro CSS. E o bacana é que você pode construir sua própria criatura. Visite clicando aqui »
Conclusão
As animações CSS se mostram uma forma interessante para proporcionar interatividade as interfaces web e que você pode optar em relação a outras tecnologias.
Graças a CSS3 animation podemos criar coisas que antigamente só eram possíveis via o antigo Flash ou com várias linhas de javascript.
O objetivo deste artigo foi dar uma pincelada introdutória sobre aspectos introdutórios da propriedade animation. Para uma pesquisa mais avançada você pode recorrer a documentação W3C.
Caso queira aprender mais sobre CSS, você pode continuar aqui no blog, acessando outros artigos sobre o assunto:
➡CSS Grid Layout
➡CSS e suas propriedades mais utilizadas
➡Tipografia para Web – parte 1
➡CSS medias queries
E você? O que achou do CSS Animation? Já utiliza em seus projetos? Deixe sua opinião e aproveite e compartilhe sobre esse assunto com seus amigos!
Forte abraço.
Até mais.
Referências:

animation


https://webdesign.tutsplus.com/pt/tutorials/a-beginners-introduction-to-css-animation–cms-21068
https://robots.thoughtbot.com/css-animation-for-beginners
http://www.creativebloq.com/css3/animation-with-css3-712437
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Animations/Usando_anima%C3%A7%C3%B5es_CSS
The post CSS3 Animation – Tutorial para iniciantes appeared first on Chief of Design.

CSS3 Animation – Tutorial para iniciantes
Fonte: Chef of Design

Sites responsivos – 7 razões para aplicar design responsivo

Sites responsivos – 7 razões para aplicar design responsivo

Eae? Tudo bele?
Você já se deparou com a seguinte situação? Um cliente possui um website um site há muitos anos que, na visão dele, funciona muito para desktop e ele deseja agora uma versão mobile deste site.
Não deixa de ser uma solução o que propõe seu cliente, porque em certas circunstâncias um site mobile dedicado mobile atender as necessidades requisitadas, porém você como Designer deve alertar sobre os custos e consequência decorrentes desta escolha e alertar sobre outras possibilidades.
E aí que o desenvolvimento de um site responsivo entra com uma possibilidade forte que traz muitas vantagens em relação a um site exclusivo para mobile.
Sites responsivos são desenvolvidos levando em consideração conceitos e técnicas do design responsivo que cada vez mais está sendo empregado na construção de todo tipo de websites.
Neste artigo eu listei 7 razões para você construir sites responsivos que farão:

Você enxergar essa possibilidade, caso não tenha enxergado;
Você ter argumentos para que clientes que possuem um antigo layout de desktop pensam na reestruturação dos mesmos;
Você fornecer o que há de melhor do design responsivo para clientes que ainda não tem presença online a partir de sites.

E então preparado?
1 – Sites que utilizam design responsivo são compatíveis a diferentes dispositivos

Esta é uma questão óbvia para quem já conhece e trabalha com o design responsivo. Porém se você nunca se aprofundou no assunto segue uma definição que gosto, retirada do site Smashing Magazine:
O Web design responsivo é a abordagem que sugere que o design e o desenvolvimento devem responder ao comportamento e ao ambiente do usuário com base no tamanho da tela, na plataforma e na orientação.
Isso quer dizer que um site desenvolvido de forma responsiva deve alternar para acomodar a resolução conforme o usuário muda de dispositivo. Essa é a grande vantagem de construir sites responsivos, eles se adéquam a diferentes dispositivos, como smartphones, tablets e desktops sem a necessidade de construir um site específico para cada dispositivo.
Só esta primeira razão é suficiente para você procurar se aprofundar no assunto. Para isso quero te fazer uma oferta gratuita. Que tal baixar nosso Manual de Web Design Responsivo?
2 – É mais fácil manter e gerenciar um site responsivo

Sites responsivos são desenvolvidos em um só ambiente e estrutura. Se trata de sites únicos. Você não precisa se preocupar com duas ou mais bases com todo conjunto de arquivos que formam um site. Muitos menos se preocupar em gerenciar dois diferentes CMS. Consequentemente você ganha tempo com todas as tarefas de gerenciamento do site.
E outra grande vantagem a destacar é que pelo fato dele ser responsivo a manutenção fica muita mais rápida e simples de ser executada por não ter que se preocupar em fazer alterações em cada site construído para um dispositivo específico.
3 – Projetos que usam design responsivos provém melhor experiência aos usuários

Atualmente é imprescindível que um site fornece a melhor experiência aos usuários possível porque isso aumenta as conversões no site, melhora a percepção da marca e diminui a taxa de rejeição. Uma das prioridades do design responsivo é cobrir todos esses aspectos para atender as necessidades comerciais dos proprietários de sites e fundamentalmente garantir uma ótima e fluente experiência a quem visitas esses sites.
Tente acessar um site antigo desenvolvido para desktop em um celular. É inevitável o uso do zoom com a posterior rolagem lateral para ver um conteúdo que não cabe dentro deste dispositivo. Não é uma das melhores experiências web. Com sites responsivos isso não ocorre.
4 – Sites responsivos são melhores classificados nos mecanismos de buscas

Essa é para quem se preocupa em classificar bem seus sites e de seus clientes nos mecanismos de buscas.
O Google privilegia sites que atendem, além de desktop, dispositivos móveis como smartphones e tablets. Tanto que preparou uma ferramenta para testar se os sites estão funcionando bem nesses dispositivos. O próprio Google Search Console verifica a facilidade de uso em dispositivos móveis.
Para ele sites responsivos terão melhores resultados nos rankings de busca, pois proporcionam uma melhor experiência do usuário.
E tem mais. O Google gosta de sites que usam urls únicas, coisa que não acontece com sites que tem diferentes versões mobile. Geralmente esses sites tem um url para a versão desktop e uma versão estilo m.seusite.com para mobile.
Além do mais o Google tem um algoritmo separado para sites mobiles o que significa que não só porque um site classifica bem em uma busca no desktop deverá acontecer o mesmo em busca feitas por celulares.
Temos que ficar preocupado com isso porque o consumo de internet por dispositivos móveis é cada vez mais crescente e ter um site responsivo se faz a cada vez mais necessário.
5 – O uso de dispositivos móveis está em ascensão
Segundo a 27ª Pesquisa Anual de Administração e Uso de Tecnologia da Informação nas Empresas, realizada pela Fundação Getúlio Vargas de São Paulo (FGV-SP), a projeção é que, no Brasil até 2018, o número de smartphones chega a 236 milhões. Isso porque não temos os dados de uso nos outros países de língua portuguesa.
Sabe o que significa esse crescimento? Significa que cada vez mais potenciais compradores verão o seu site e de seus clientes a partir de um dispositivo móvel. E se a experiência de interação com a interface deles não for boa serão grandes as chances de os usuários partirem para os sites da concorrência.
6 – O maior consumo de redes sociais se dá em dispositivos móveis

Naturalmente que com o aumento do número de dispositivos móveis aumenta também o consumo de redes sociais nestes dispositivos, portanto, compartilhar links de sites em redes sociais como Facebook, YouTube, Twitter ou Google Plus significará ainda mais tráfego e visualização de seu site a partir de celulares e tablets. Consequentemente um site responsivo é indicado para sua estratégia de compartilhamento social.
Só para você ter uma ideia, de acordo com agência eMarketer, o Brasil é o maior usuário de redes sociais da América Latina. Os números mais recentes estimaram um total de 93,2 milhões até o final do ano de 2016.
7 – Maior uso de smartphones e tablets impulsiona compras online pagas com estes aparelhos

Segundo um estudo do instituto de pesquisa Ipsos e da PayPal, o Brasil está à frente da média mundial no hábito de comprar pela internet usando um smartphone ou tablet.
Isso é o tipo de notícia que agrada qualquer proprietário de site que vende algum produto online. Principalmente se ele não tem que se preocupar se seu site está funcionando para todos dispositivos.
E muitos usuários gostam de fazer compras no conforto do seu lar ou em qualquer lugar sem se preocupar com deslocamentos. Hoje é tudo muito simples. Com simples ações na interface de um site ele já pode concretizar uma compra. Mas lógico se estiver acessando um site preparado para seu dispositivo.
Se os produtos e serviços de seus clientes não são fáceis de visualizar a partir de tablet ou smartphone, eles não devem estar felizes com a solução que você encontrou para os problemas deles.
Conclusão
Espero que os argumentos aqui apresentados sejam suficientes para te alertar sobre a importância de adotar o design responsivo em seus projetos. Como falei em um dos tópicos é imprescindível que um site forneça a melhor experiência aos usuários. Isso porque, além do nosso objetivo como profissionais da web de oferecermos o que é adequado aos usuários, temos que também nos preocupar com os objetivos comerciais de nossos clientes e a ação de desenvolver sites responsivos vem de encontro a esses objetivos.
Para te auxiliar na construção de sites responsivos vou te indicar dois matérias especiais. Um e-book e um artigo. Os links estão a seguir:
1 – E-book Manual de Web Design Responsivo
2 – Como usar o CSS3 media queries para que seu site atenda a diferentes resoluções de tela
Muito bem Galucho! E você se preocupa em construir sites responsivos? Deixe aqui seu comentário e compartilhe com amigos que gostariam de saber mais!
Forte abraço.
Até mais.
Referências:

Responsive Web Design – What It Is And How To Use It


http://www1.folha.uol.com.br/mercado/2016/04/1761310-numero-de-smartphones-em-uso-no-brasil-chega-a-168-milhoes-diz-estudo.shtml

Brasil é o maior usuário de redes sociais da América Latina


http://www.bbc.com/portuguese/noticias/2015/02/150226_pagamentos_celular_rb
The post Sites responsivos – 7 razões para aplicar design responsivo appeared first on Chief of Design.

Sites responsivos – 7 razões para aplicar design responsivo
Fonte: Chef of Design