Arquivado - acompanhar o novo repo Caminho Front-End

Mentoria de CSS

Seletores

• elemento
• #id
• .classe
• :pseudo-classe
• decendentes e irmaos
• seletores compostos

Material de Apoio

1. Seletores - CSS
2. Os 30 Seletores CSS Que Você Deve Memorizar
3. Sintaxe e Seletores CSS

---

Tamanho e Posicionamento

• Propriedades box-sizing, width e height
  • Influência do box sizing
  • medidas de unidades [vw,vh, %, em, px rem)
  • valores de fit-content, max-content, min-content
• Propriedades margin e padding
• Propriedade display
  • block, inline e inline-block
  • grid e flex
• Propriedade position

Material de Apoio

1. Guia Completo de Flexbox
2. Guia Completo de Grid

---

Aparência

• Propriedade Background
  • Propriedade guarda-chuva background
  • background-color, background-image, background-position
  • Gradiente: linear-gradient, radial-gradient
• Propriedade box-shadow
• Propriedade border
  • Propriedade guarda-chuva border
  • border-left, botder-top, border-left-bottom e as demais...
  • border-radius

---

Posicionamento Avançado

• Propriedade position:absolute
  • left, top, bottom, right
• Propriedade transform:translate
  • translateX, translateY, translateZ

---

Animação

• Propriedade transition
• propriedade guarda-chuva transition
• transition-delay, transition-duration, transition-property, transition-timing-function
• Propriedade animation
  • propriedade guarda-chuva animation
  • animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.
• Propriedade animation-timing-funcion a fundo
• @keyframes

Material de Apoio

1.animation

2.animation-timing-function

3.keyframes

---

Reponsividade

• Media querie e a função @media
• Media como atributo da tag style

Material de Apoio

1.Media

2.@media

---

CSS Moderno

• pseudo-classe :root
• Custom Properties
• funcões
  • calc()
  • attr()
  • var()

Material de Apoio

1. :root
2. Custom Properties

---

Compatilibidades

• prefixos
  • -webkit- (Chrome, Safari, versões mais recentes do Opera.)
  • -moz- (Firefox)
  • -o- (Versões antigas do Opera)
  • -ms- (Internet Explorer)

Material de Apoio

1. MDN - Vendor
2. Prefixos - Tableless

---

Tutoriais e Tricks

• Centralizando Coisas - W3C

Sites para todo o conteúdo

1. MDN - CSS
2. CSS - Tricks
3. Chief of Desing
4. w3cschool
5. Tableless

Contas / Pessoas para acompanhar

1. Sarah Drasner
2. Sara Soueidan
3. Keyframers
4. Kashef
5. Felipe Fialho