- Algumas anotações de informações que eu não conhecia ou usava pouco.
- Segurar alt sobre uma tag no VS Code + setinha para cima ou para baixo, movimenta a tag toda 🤯😱
- Mobile-First - Sempre começar a fazer a pagina como se fosse pra Movel, depois ir aumentando.
- Quando usar o
display:-flex&gridflex: Quando não importa a quantidade certa de colunas.grid: Quando sabe quantas colunas irão ter.
- Os testes geralmente são feitos no DEV Tools (F12)
- https://fontawesome.com/ - Icones Gratuitos
- Icons -> Free -> Copy
<i class="fab..."> - Perfil -> Kits -> CLica no numero -> Copy Script
- Icons -> Free -> Copy
- Formas Geometricas - Clip Path - https://bennettfeely.com/clippy/
- https://css-doodle.com/
- https://flukeout.github.io/ - Seletores
- https://flexboxfroggy.com/#pt-br - Flexbox
- https://cssgridgarden.com/ - Grid
| AULA | LINK | ANOTAÇÕES |
|---|---|---|
| 01 | Imersão CSS Aula 1 - Página pessoal | - Para o Display: Flex; - Faz todo mundo virar coluna.Usar em conjunto: justify-content: space-between; - espaço nas do meio justify-content: space-around; - espaço na coluna inteira font-style: italic Unidade de Medida: VW - Viewport Width = 100% do total da tela VH - Viewport Height = 100% do total da tela Melhor que usar o % Assistir aulas: Box-model e box-shadow no CSS sem segredos #AluraMais Box-sizing no CSS sem segredos #AluraMais filter: blur(10px) - desfoca texto/ imagens... |
| 02 | #ImersaoCSS Aula 2 - Sites Responsivos | * {} - Reset do CSS. Resetar os padroes do CSS , controla todo css. Ex: * {margin: 0; padding: 0;} header {height: 100vh; display: flex;}- deixa o header da altura da tela do PC justify-content: center; - Alinha horizontalmente align-items: center; - Alinha verticalmente position: fixed; - Position mexe no eixo Z top, left, right, bottom - Só funciona se o position tiver declarado. top: 0 - Cola o container no topo <a> - é um elemento inline, nao quebra linha, e nao é um bloco Elementos que não são blocos o padding nao funciona display: block - tranforma em bloco. <meta name="viewport"... - Se torna responsivo para dispositivos móveis. BreackPoint: @media(min-width: 400px) { - Condição, como se fosse um IF body { font-size: 14pt; } } Unidade de Medida: EM - Unidade relativa. Ajuda a fazer fontes responsivas Exemplo: 2em = 2 vezes o valor padrao. Deixar as fontes fixas so para o Body, e usar no restante, as relativas. |
| 03 | Imersão CSS Aula03 - Colunas e Linhas | Google Fontes.display: grid; - Grade Propriedades do Grid: gap - define o espaçamento entre qualquer linha ou coluna. grid-template-columns: 200px 300px 200px - Quantidade de colunas, e seus respectivos tamanhos grid-template-columns: repeat(3, 240px) - Função para repetiçao de colunas justify-content: center - Centralizar height: calc(100vh - 3em - 48px); object-fit: contain; - Deixa as imagens no tamanho padrao, desrespeitando qualquer modificação css object-fit: cover; - Ocupam o mesmo espaço e nao deformam as imagens |
| 04 | Alura ImersaoCSS Aula04 v1 | min-height: 100vh - Altura minima transition: background 2s, color 1s - Pode passar mais de um parametro e tempo. Não recomendavel por transition all :active - Momento que o usuario clica em cima do elemento transform: scale(1.2) rotateX(30deg); - Escala do elemento. 1 é o padrao translateY(50vh) Para Animação: Usar o Transform. animation: linear 2s animacaoTitulo forwards; - Para fazer a Animação. Por dentro da classe CSS. forwards - Quando a animação acabar, fica fixo na tela animacaoTitulo - Nome da Função Função - Fora da classe CSS @keyframes animacaoTitulo{ from { } ou 0% { } - Estado inicial to { } ou 100% { transform: scale(1) translateY(0); opacity: 1; } } - Estado final ID - Mais usada na tag a href="#portfolio" serve de ancora. |
| 05 | #ImersaoCSS Aula 5 - Efeitos Visuais | text-indent - Recuo do Paragrafo float - Mais usado para textos e imagens border-radius: 50% - Fazer uma bola clip-path: polygon() - Corta e faz formas geometricas position: - O relative sempre vai ser a class mãe. backface-visibility: hidden transform: rotateY(180deg) |
| PROPRIEDADES | PARAMETROS |
|---|---|
justify-content |
flex-start(default) - Itens se alinham à esquerda do container. flex-end - Itens se alinham à direita do container.center - Itens se alinham no centro do container. space-between - Itens se alinham com distância igual entre eles. space-around - Itens se alinham com distância igual em torno deles. |
align-items |
flex-start - Itens se alinham na parte de cima do container. flex-end - Itens se alinham na parte de baixo do container. center - Itens se alinham no centro vertical do container.baseline - Items se alinham na linha da base do container. stretch(default) - Itens se esticam para preencher o container. |
flex-direction |
row(default) - : Itens são posicionados na mesma direção do texto. row-reverse - Itens são posicionados na direção oposta à do texto. column - Itens são posicionados de cima para baixo. column-reverse -Itens são posicionados de baixo para cima. |
oder |
inteiros -1 0 1 ... - Posição individual |
align-self |
Posição Individual Vertical. ex: .yellow{align-self} - Mesmos parametros de Align-items |
flex-wrap |
nowrap - Todos os itens são apertados em uma unica linha wrap - Itens se separam em linhas adicionais wrap-reverse - itens se separam em linhas adicionais em reversos. |
flex-flow |
flex-direction e flex-wrap são usadas quase sempre juntas, entao foi criado esta, para junção delas duas. ex: flex-flow: row wrap; |
align-content |
flex-start - Linhas agrupadas no topo do container flex-end - Linhas são agrupadas no fundo do container center - Linhas agrupadas no centro vertical do container space-between - linhas posicionadas com espaços iguais entre elas. space-around - Linhas são posicionadas com espaço igual em torno delas stretch - linhas se esticam para preencher o container |
display: grid |
Cria grids (grades) |
grid-template-columns |
20% 20% 20% - Cria colunas com 20% |
grid-template-rows |
20% 20% 20% - Cria linhas com 20% |
grid-column-start |
inteiro - Posição do grid inicial. Exemplo: 3 grids. inteiro: 3. Começa no grid 3 |
grid-column-end |
inteiro - Preeche ate o final |
grid-column-start |
span inteiro - Completa a coluna e so aceita numeros inteiros |
grid-column |
2 / 4 = posição 2 e terminar na linha 4 - Junção do start com end |
grid-row-start: |
Posição inicial na linha. |
grid-row: |
2 / 6 - Junção do start com end |
grid-area: |
1 / 2 / 3 / 4 Primeiro: Linha. Segundo: Coluna. Terceiro: Completar por coluna. Quarto: Completar por linha |
order |
inteiro(negativo ou positivo) - Ordem de tal classe ou ID |
grid-template-columns: |
repeat(8, 12.5%) tamanho porcentagem flex max-content min-content Exemplo: grid-template-columns: repeat(3, 100px 3em 40%) grid-template-columns: 1fr 5fr - fracionario: 1/6 e 5/6 |
| `` |
18:54