Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Como Fazer Input Animado com Html e Css
Play lesson

Desenvolvimento Web com Front-End - Aprendendo do Zero" HTML, CSS e JS - Como Fazer Input Animado com Html e Css

4.0 (2)
17 learners

What you'll learn

This course includes

  • 18.3 hours of video
  • Certificate of completion
  • Access on mobile and TV

Summary

Keywords

Full Transcript

#inputanimado #formulário #teladelogin #animaçãobotão #Css3 #Html5 📚 Muito Obrigado por Assistir! Minutagem: 00:00 | INTRODUÇÃO 00:50 | COMO FAZER O FORM METHOD POST 02:24 | COMO FAZER RESET DOS VALORES DE ESPAÇAMENTO COM CSS 02:39 | COMO USAR O FLEXBOX PARA CENTRALIZAR ITENS 03:24 | COMO CUSTOMIZAR TAG H1 COM BACKGROUND GRADIENT 04:50 | ESTILIZANDO A DIV INPUT 05:10 | ESTILIZANDO INPUT TYPE TEXT E PASSWORD 06:00 | COMO FAZER BORDER IMAGE GRADIENT 07:00 | COMO POSICIONAR A LABEL DENTRO DO INPUT 07:50 | COMO ANIMAR LABEL USANDO TRANFORM 08:25 | COMO VALIDAR A LABEL 09:20 | ESTILIZANDO O BOTÃO COM BACKGROUND GRADIENT 10:15 | COMO FAZER UM BOTÂO COM EFEITO HOVER 12:45 | COMO FAZER A TELA DE LOGIN RESPONSIVA Nesse vídeo vamos fazer uma tela de login, com duas entrada uma de usuário e a outra de senha e um botão. No input vamos fazer uma animação com label com bordas image gradient e no botão colocamos background gradient com efeito hover. 📌Saiba Mais https://www.youtube.com/c/WebOnlineDesenvolve 📌 https://github.com/WebOnlineDesenvolve |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Os Mais Vendidos na Amazon em Computadores e Informática: https://amzn.to/3nWnCbr Mais Vendidos em Games e Consoles: https://amzn.to/3ufq8ed Mais Vendidos em Dispositivos Amazon e Acessórios: https://amzn.to/3EEfulQ Mais Vendidos em Apps e Jogos: https://amzn.to/39whbU9 Notebook: https://amzn.to/3EJk5TK Pcs: https://amzn.to/3zrgaas |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 🎵 Música : Large Smile Mood - Nico Staf *********************************************** TELA FINAL DO VÍDEO: Saiba Mais: Canal do Savio Ferraz - Animações feitas por @Savio Ferraz ************************************************* ✨IDE: ( Integrated Development Environment )Microsoft Visual Studio. ✨IDE: ( Integrated Development Environment ) Visual Studio Code. EXTENSÕES VISUAL STUDIO CODE: LIVE SERVER: Carrega a página automaticamente. BEAUTIFY : Padroniza a formatação do código COLOR HIGHLIGHT : Mostra as cores que você está criando no arquivo css. INTELLISENSE FOR CSS: Fornece o auto completo da classe que você escreveu no seu código. ✨Software Editor de videos: Shotcut. ✨Software para gravar a tela do computador: OBS Studio. Google Fontes: https://fonts.google.com/ ⭐ Biblioteca JavaScript https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js Fontes de ícones 🔎https://fontawesome.com/v5.15/icons?d=gallery&p=2 🔎https://fontawesome.com/ Ambiente de Desenvolvimento: codepen.io HTML E CSS: 🔎https://www.w3schools.com/default.asp Tabelas de cores: 🔎https://www.flextool.com.br/tabela_cores.html Imagem para baixar: 🔎https://pixabay.com/pt/ Site para criar Thumbnails: 🔎https://www.canva.com/

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere