cefet_web

CSS parte 3

Flexbox, Grid, Visibilidade e Web Fonts

---

Na última aula (1/4)

• Quando mais de uma regra CSS se aplica, uma delas prevalece
  • O navegador calcula uma pontuação de especificidade (abc) do seletor de cada regra:
    • a: quantidade de ids no seletor
    • b: quantidade de classes, atributos e pseudo-classes no seletor
    • c: quantidade de pseudo-elementos no seletor
  • Quanto maior esse número, maior a precedência da regra ser aplicada

---

Na última aula… (2/4)

• Entendemos o Box Model (modelo da caixa) que é como o navegador enxerga os elementos
  • Há espaço para conteúdo , padding , border e margin

---

Na última aula (3/4)

position	Descrição	Exemplos de uso	top, right, bottom, left	z-index
static	Fluxo normal	Elementos sem posicionamento especial	ignorados	ignorado
relative	Fluxo normal, deslocado	Elementos que podem se deslocar um pouco; contextos para elementos absolutos	deslocamentos nas 4 direções	define ordem

---

Na última aula (4/4)

position	Descrição	Exemplos de uso	top, right, bottom, left	z-index
absolute	Removido do fluxo, posicionado (x,y) relativo a um contexto	Elementos que queremos definir os valores (x,y) para posicioná-los exatamente nesse lugar	posições referentes às 4 direções	define ordem
fixed	Removido do fluxo, em um (x,y) na janela	Idem, mas a posição é fixa na janela	posições para as 4 direções	define ordem

---

Hoje veremos…

1. Flexbox
2. Grid
3. Visibilidade de elementos
4. Web Fonts

---

Flexbox

Layouts de 1D

• Relembrando propriedade display
• flex, inline-flex
• Propriedades acessórias
• Exemplos

---

A propriedade display (na MDN)

• Define o tipo de visualização de um elemento e também seu comportamento no fluxo da página
• Os valores mais comuns
  • block, para definir um elemento com comportamento block
  • inline, similarmente, para inline
  • inline-block, similar a block, porém sem quebra de linha
  • none, sem renderização

---

Resultado do display inline-block

---

Conheça o FLEXBOX 🐸

---

Exemplo com flexbox: lista horizontal

ul.horizontal {
  display: flex;
  justify-content: space-around;

  /* tirar coisas que vem na <ul> */
  list-style-type: none;
  padding-left: 0;
}

ul.horizontal > li {
  flex: 1; /* crescer com peso 1 */
  
  /* espacinho e centralização */
  margin-right: 4px;
  text-align: center;
}

• ::: result . text-align: center
  • Abacaxi
  • Kiwi
  • Maçã
  • Uva
  • Limão :::
• Veremos mais sobre flexbox em outra aula

---

Display: flex e inline-flex

• Mais recentemente, o CSS3 introduziu o flexbox
• É uma forma bem flexível para dispor os elementos
• Cria uma linha (row) ou coluna (column) com filhos
• Além de display: flex e display: inline-flex, foram introduzidas outras propriedades. Exemplos:

flex-direction ~ row (padrão), column, row-reverse, column-reverse ~ dispõe filhos na horizontal (se row) ou vertical (column)

justify-content ~ flex-start (padrão), center, space-around, space-between… ~ define como distribuir o espaço que sobrou

align-items ~ stretch (padrão), flex-start, center… ~ define posição dos elementos no “contraeixo”

---

Jogo Flexbox Froggy 🌐 ~ melhor professor de flexbox ~

---

Como funciona o flexbox (1/3)

1. 

2. Ideia: habilidade do elemento alterar o tamanho de seus filhos (e ordem) para ocupar o espaço disponível
3. Há propriedades para o elemento flex e para seus filhos
   • Apenas o pai tem display: flex

• flex-direction define o eixo principal e o contraeixo

• 
• flex-wrap se precisar quebra linha?
• 

---

Como funciona o flexbox (2/3)

• justify-content distribui espaço em branco no eixo principal

• 

1. align-items alinhamento no contraeixo

2. 

• align-content distribui espaço em branco no contraeixo

• 
• Só se flex-wrap !== nowrap

---

Como funcionam os filhos de flexbox (3/3)

• flex define o peso do elemento no eixo na hora de definir seu tamanho

• 
• ⬆️ na verdade, é atalho para flex-grow, flex-shrink e flex-basis

1. align-self alinhamento no contraeixo apenas deste filho

2. 
3. gap define um espaço mínimo entre filhos
   • 

• order define uma ordem diferente da do código fonte

• 

---

Grid

Layouts de 2D

• Propriedades acessórias
• Exemplos
• Grid Garden

---

CSS Grid Layout

• Flexbox é ótimo para layouts de 1 dimensão (linhas ou colunas)
• Grid cria layouts de 2 dimensões (linhas e colunas)
• Além de display: grid (e inline-grid), várias novas propriedades foram introduzidas
• Há propriedades para o elemento grid e para os filhos de grid
  • Algumas propriedades do Flexbox também são usadas
• Deve-se definir as linhas e colunas e seus tamanhos

---

Exemplo usando grid

• HTML

  <main>
    <header></header>
    <nav></nav>
    <section></section>
    <footer></footer>
  </main>
  

  CSS (elemento pai)

  main {
    display: grid;
    grid-template-rows: 200px 1fr auto;
    grid-template-columns: 300px 1fr;
  }
  

1. CSS (dos filhos)

   header {
     grid-column: 1 / 3;
   }
   
   nav {
     grid-column: 1 / 2;
     grid-row: 2 / 3;
   }
   section {
     grid-column: 2 / 3;
     grid-row: 2 / 3;
   }
   footer {
     grid-column: 1 / 3;
     grid-row: 3 / 4;
   }
   

   ::: result .full-width height: 250px; display: grid; grid-template-rows: 60px 1fr auto; grid-template-columns: 90px 1fr;

   :::

---

Conheça o Grid Garden 🥕

---

Jogo Grid Garden 🌐 ~ melhor professor de grid ~

---

Conceitos sobre Grid

• Elemento grid: aquele que tem display: grid ou inline-grid
• Filho de grid: todos os filhos diretos de um elemento grid

1. Calha: traço entre linhas ou colunas (ou início/final)
2. Célula: espaço entre quatro calhas

• Trilha: linha ou coluna
• Área: conjunto adjacente e retangular de células

---

Como funciona o Grid (1/3)

• grid-template-columns, grid-template-rows definem quantidade e tamanho de colunas e linhas

  .container {
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
  }
  

• 

1. grid-column, grid-row especifica as calhas da célula onde o filho será colocado

   .item-a {
     grid-column: 2 / 5;
     grid-row: 1 / 3;
   }
   

2. 

---

Como funciona o Grid (2/3)

• grid-template-areas dá nomes às áreas da grid

  .container {
    display: grid;
    grid-template-columns: repeat(1fr, 4);
    grid-template-rows: repeat(1fr, 3);
    grid-template-areas: 
      "header header header header"
      "main main . sidebar"
      "footer footer footer footer";
  }
  

  • Um . é uma célula vazia
  • repeat(n, valor) é um atalho

1. grid-area especifica nome da área onde o filho será colocado

   .item-a {
     grid-area: header;
   }
   .item-b {
     grid-area: main;
   }
   .item-c {
     grid-area: sidebar;
   }
   .item-d {
     grid-area: footer;
   }
   

2. 

---

Como funciona o Grid (3/3)

• Além dessas propriedades, há várias outras
  1. gap: define espaço entre linhas e colunas

     .container {
       gap: 15px 10px;
     }
     

1. justify-items
2. align-items
3. justify-content
4. align-content
5. grid-auto-columns, grid-auto-rows
6. justify-self
7. align-self
8. Valor masonry para trilhas
9. Veja o guia completo de Grid em CSS Tricks

---

Alterando a visibilidade

Fazendo elementos aparecerem ou sumirem

• Com display: none
• Com visibility: hidden
• Com opacity
• Propriedade overflow

---

Usando display

• É possível tornar um elemento invisível usando display: none

  #logotipo {
    display: none;
  }
  

• O elemento é removido do fluxo, ou seja, o espaço onde ele seria posicionado é liberado
• O elemento deixa de responder a eventos

Problema: não é possível fazê-lo desaparecer/ressurgir com transição se ele vai para (ou de) display: none

---

A propriedade visibility (na MDN)

• Usada para alterar a visibilidade de elementos

  #logotipo {
    visibility: hidden; /* visible é o padrão */
  }
  

• Os elementos invisíveis (hidden) continuam ocupando espaço (não afetam o layout)
• Descendentes de elementos invisíveis herdam o valor hidden, mas podem tornar-se visíveis usando visibility: visible;

---

A propriedade opacity (na MDN)

• Usada para definir a opacidade (“transparência”) de elementos

  video {
    opacity: 0.5; /* 0.0 (transparente) a 1.0 (opaco) */
  }
  

• Os elementos transparentes continuam ocupando espaço, mas deixam transparecer quem está “atrás” deles
• Continua respondendo a eventos

2. ↙️ Comparação entre display, visibility e opacity

---

A propriedade overflow (na MDN)

• Controla se conteúdo que extrapola o elemento deve ser cortado, se deve ser mostrado ou se deve ser criada uma barra de rolagem

  div {
    overflow: scroll; /* visible, hidden, scroll, auto */
  }
  

• Exemplo:

  • div {
      max-height: 175px;
      overflow: auto;
    
      /* para visualizar a div */        
      border: 1px dashed gray;
    }
    

    ::: result . max-width: 50%

    Cultuadas ao longo da história por diversas civilizações como símbolo de riqueza, trabalho ou de perseverança, pela forma como defendem seu território, as abelhas surgiram muito antes do homem, há mais de 100 milhões de anos.

    Pertencentes à ordem Hymenoptera e à superfamília dos Apoidea (grupo Apiformes), as abelhas se dividem em cerca de 20 mil espécies e a mais conhecida é a Apis mellifera.

    :::

---

Web Fonts

Usando fontes não-instaladas

• Formatos de fontes
• A regra @font-face
• Google Fonts

---

Web Fonts

• Motivação:
  • Utilizar fontes que não estão instaladas no computador
• Passos:
  1. Escolher a fonte
  2. Gerar todos os formatos para que funcione em todos os principais navegadores
     • .ttf
     • .otf
     • .eot
     • .woff
     • .woff2 🌟
  3. Publicar a fonte na Internet (ou no seu próprio site)

---

Web Fonts (usando)

1. Descrever a fonte no arquivo CSS usando @font-face {...}:

   @font-face {
     font-family: "Emblema One";    /* dando um nome à fonte */
     src: url("fonts/EmblemaOne-Regular.woff2") format('woff2'), /* 1º formato */
          url("fonts/EmblemaOne-Regular.woff")  format('woff'),  /* 2º formato */
          url("fonts/EmblemaOne-Regular.ttf")   format('ttf');   /* 3º formato */
   }
   

2. Usar a fonte:

   h1 {
     font-family: "Emblema One", sans-serif;
   }
   

   • Sempre coloque uma segunda opção (e.g., sans-serif)

---

Formatos de fonte e os navegadores

• WOFF2 é até 50% menor que WOFF
• TTF é suportado em todos navegadores

---

Usando fontes “mais facinho”

• Gerar os formatos de fonte necessários pode dar trabalho
• Outra alternativa é usar sites que provêem diversas fontes para serem usadas
  • Exemplos:
    1. Google Fonts
    2. Dafont
    3. FontSpace
  • Além de ter vários formatos das fontes, eles fornecem o código CSS

---

Referências

• Jogo Flexbox Froggy 🐸
• Jogo Grid Garden 🥕
• A complete guide to Flexbox em CSS Tricks
• A complete guide to CSS Grid em CSS Tricks