- Formatos de Imagens
- JPEG (ou JPG), bom para fotos tiradas do mundo real, que possuem muita variação de cor. Não possui transparência
- GIF , transparência de 1 bit e
suporta animações de quadros
- Apenas 256 cores na imagem (muito pouco!!)
- PNG , transparência de 8 bits
e suporta mais cores que GIF
- Bom formato para imagens com pouca variação de cor
- SVG , imagens vetoriais que não perdem qualidade se ampliadas
<video src="videos/fendadobiquini.mp4" controls></video>
- Para aumentar a compatibilidade:
<video width="320" height="240" controls> <source src="bob-esponja.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2"> <source src="bob-esponja.webm" type="video/webm; codecs=vp8,vorbis"> Seu navegador não suporta o elemento video. </video>
- O navegador tentará abrir o vídeo
bob-esponja.mp4
(i.e., o primeiro)- se não conseguir, tentará o arquivo
bob-esponja.webm
(2º) - se, mesmo assim, não conseguir, será exibido o texto
- se não conseguir, tentará o arquivo
- 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.ttf") format('ttf'); /* 2º formato */ }
- Usar a fonte:
h1 { font-family: "Emblema One", sans-serif; }
- Sempre coloque uma segunda opção (e.g.,
sans-serif
)
- Sempre coloque uma segunda opção (e.g.,
- Valores:
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 "tradicionais"
block
, para definir um elemento com comportamentoblock
inline
, similarmente, parainline
inline-block
, similar ablock
, porém sem quebra de linhanone
, sem renderização
- Veremos esses primeiro, depois
table-*
e os bacanõesflex
egrid
-
É possível, por exemplo:
div { display: inline; } span { display: block; }
- Mas é claro que você não vai fazer isso... ;)
-
Para remover um elemento do fluxo e não renderizá-lo de forma alguma:
a[href*="xxx"] { display: none; }
- Une a capacidade de se definir dimensões de
block
e a possibilidade de ter um fluxo lateral (sem quebra de linha), comoinline
. Exemplo:<div class="passo">Instalar</div> <div class="passo">Aprender</div> <div class="passo">Programar</div>
.passo { display: inline-block; width: 150px; height: 150px; /* ... */ }
<iframe width="600" height="400" src="//jsfiddle.net/fegemo/2gfkyrrh/3/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0" class="flex-align-center bordered rounded"></iframe>
- Alguns valores são para a criação de layouts em formato de tabelas:
table
,table-cell
,table-column
,table-column-group
,table-footer-group
,table-header-group
,table-row
,table-row-group
,inline-table
- Veja alguns exemplos de uso no link
Hoje em dia: preferimos flex ou grid ;)
flex
,inline-flex
- Propriedades acessórias
- Exemplos
- 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
edisplay: 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"
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 :::
- Colocamos
display: flex
no pai - Faz os filhos se comportarem de um jeito diferente
- Vamos usar outras propriedades (além de
display
). Ex:flex-direction
(linha ou coluna)justify-content
(como dist. espaço)flex-wrap
(continuar na próxima linha ou coluna?)
Jogo Flexbox Froggy 🌐 ~ melhor professor de flexbox ~
-
- Ideia: habilidade do elemento alterar o tamanho de seus filhos (e ordem) para ocupar o espaço disponível
- Há propriedades para o elemento flex e para seus filhos
- Apenas o pai tem
display: flex
- Apenas o pai tem
-
flex
define o peso do elemento no eixo na hora de definir seu tamanho - ⬆️ na verdade, é atalho para
flex-grow
,flex-shrink
eflex-basis
- Propriedades acessórias
- Exemplos
- Grid Garden
- 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
(einline-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
- HTML
CSS (elemento pai)
<main> <header></header> <nav></nav> <section></section> <footer></footer> </main>
main { display: grid; grid-template-rows: 200px 1fr auto; grid-template-columns: 300px 1fr; }
- CSS (dos filhos)
::: result .full-width height: 250px; display: grid; grid-template-rows: 60px 1fr auto; grid-template-columns: 90px 1fr; :::
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; }
Jogo Grid Garden 🌐 ~ melhor professor de grid ~
- Elemento grid:
aquele que tem
display: grid
ouinline-grid
- Filho de grid:
todos os filhos diretos de um elemento grid
-
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; }
-
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; }
-
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
- Um
-
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; }
- Além dessas propriedades, há várias outras
justify-items
align-items
justify-content
align-content
grid-auto-columns
,grid-auto-rows
justify-self
align-self
- Veja o guia completo de Grid em CSS Tricks
- Guia completo de Flexbox em CSS Tricks
- Guia completo de Grid em CSS Tricks