Toast notifications com TailwindCSS

Workshop

12 vídeos • 01:31:13
  1. 1.

    Introdução ao Projeto

    02:52
  2. 2.

    Duas Tags novas no HTML: dialog e template.

    01:32
  3. 3.

    Estruturando o botão no HTML

    04:04
  4. 4.

    Estruturando e estilizando a notificação no HTML

    10:53
  5. 5.

    Adicionando o avatar na notificação

    05:05
  6. 6.

    Limitando o tamanho da mensagem

    06:20
  7. 7.

    Evitando o layout shift da imagem

    03:33
  8. 8.

    Implementando a tag html template

    07:11
  9. 9.

    Fazendo o botão de close funcionar

    07:19
  10. 10.

    Removendo a notificação após 5 segundos

    07:12
  11. 11.

    Animações - Adicionando transição de saída

    25:22
  12. 12.

    Animações - Animando a entrada

    09:50
Login
Workshops>Toast notifications com TailwindCSS>Evitando o layout shift da imagem

Evitando o layout shift da imagem

Se a imagem demora para carregar, o conteúdo pula na tela. O Ícaro mostra uma estratégia para evitar isso

Comentários

(0)