Skip to content
This repository has been archived by the owner on Jun 30, 2021. It is now read-only.

Latest commit

 

History

History
133 lines (101 loc) · 4.19 KB

readme.md

File metadata and controls

133 lines (101 loc) · 4.19 KB
Raw

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

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