Estilização de componentes: botões, campos de formulário e cards

Episódio sobre a estilização dos componentes mais frequentes da web: o botão, o campo de formulário e o card que agrupa os dois. A ligação entre label e input e a navegação por teclado; bordas, border-radius e o shorthand background; ícones reaproveitáveis com SVG sprites; os estados :hover e :focus com transition; as quatro fases de renderização do navegador (Style, Layout, Paint e Composite) e o limite de 16 ms por quadro; e por que as transições devem animar só transform e opacity. Neste episódio: · Os campos de formulário e a ligação entre label e input · Bordas, cantos arredondados e o shorthand background · Ícones com SVG sprites: symbol e use · Estados :hover e :focus com transition · As quatro fases de cada quadro e o limite de 16 ms · Nem toda propriedade custa o mesmo: Layout, Paint e Composite · Na prática: o botão e o campo de login em CSS · Anatomia de um card