#barraparatexto #FrontEnd #Css3 #Html5
📚 Muito Obrigado por Assistir!
SAIBA MAIS
📌 / webonlinedesenvolve
📌github.com/Web...
Olá, neste vídeo vamos falar sobre como criar um formulário simples em HTML com um campo de entrada de texto e dois botões, um para enviar o formulário e outro para executar uma ação. Vamos dar uma olhada no código HTML para ver como ele é estruturado e como podemos estilizá-lo com CSS.
No código HTML, temos uma div com a classe "input-container" que envolve todo o contêiner de entrada de texto. Dentro desta div, temos dois botões: o primeiro é um botão de envio com o tipo "submit", que enviará o formulário quando pressionado, e o segundo é um botão de microfone com o tipo "button", que pode ser usado para executar outra ação. Ambos os botões contêm ícones que são inseridos usando a tag "i" com classes "fa fa-search" e "fa fa-microphone".
O campo de entrada de texto é do tipo "text" e tem um atributo "placeholder" com um texto de ajuda para o usuário. O formulário tem um atributo "action" com o valor "#" que define para onde os dados serão enviados quando o formulário for enviado (neste caso, não para lugar nenhum).
O ícone do microfone é definido pela classe i, que é usada em conjunto com a propriedade margin: 0 2px para definir suas margens. A cor do ícone é definida pela propriedade color: #70757a.
A classe button[type="submit"] é usada para definir o estilo do botão de envio do formulário de pesquisa. As propriedades background-color, color e padding definem a aparência do botão, enquanto border: none remove sua borda. border-radius: 25px define as curvas do botão, e cursor: pointer define o cursor do mouse ao passar sobre ele. transition: all 0.3s ease define a animação que ocorre quando o botão é clicado.
A classe input-container define o estilo do contêiner de entrada de pesquisa. width: 50% define a largura do contêiner como 50% da largura total do formulário, e overflow: hidden esconde qualquer conteúdo que ultrapasse os limites do contêiner. margin-right: 10px define a margem direita do contêiner como 10 pixels, enquanto background-color: #fff define sua cor de fundo.
O campo de entrada de pesquisa é definido pela tag input[type="text"], que ocupa toda a largura disponível do contêiner. As propriedades padding: 15px e border: none definem o preenchimento do campo de entrada e removem sua borda, respectivamente.
Finalmente, a classe fa-microphone é usada para definir o estilo do ícone do microfone. A propriedade display: inline-block define o ícone como um elemento em linha. font-size: 24px define o tamanho da fonte do ícone, enquanto background-image, -webkit-background-clip e -webkit-text-fill-color definem a cor gradiente do ícone.
Com essas propriedades CSS, podemos personalizar o formulário de acordo com as necessidades do nosso projeto. Espero que este tutorial tenha sido útil para você. Obrigado por assistir!
link da Amazon:
www.amazon.com...
Os Mais Vendidos na Amazon em Computadores e Informática:
amzn.to/3nWnCbr
Mais Vendidos em Games e Consoles:
amzn.to/3ufq8ed
Mais Vendidos em Dispositivos Amazon e Acessórios:
amzn.to/3EEfulQ
Mais Vendidos em Apps e Jogos:
amzn.to/39whbU9
Notebook:
amzn.to/3EJk5TK
Pcs:
amzn.to/3zrgaas
🎵 Música: Back to the Future - Ofshane
✨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.
✨Tema do VS Code: Escuro+ (Escuro padrão)
✨Software Editor de videos: Shotcut.
✨Software para gravar a tela do computador: OBS Studio.
Google Fontes:
fonts.google.com/
⭐ Biblioteca JavaScript
cdnjs.cloudfla...
Fontes de ícones
🔎fontawesome.co...
🔎fontawesome.com/
Ambiente de Desenvolvimento:
codepen.io
HTML E CSS:
🔎www.w3schools....
Site de verificação de erro:
🔎validator.w3.org/
Tabelas de cores:
🔎www.flextool.c...
Imagem para baixar:
🔎pixabay.com/pt/
Site para criar Thumbnails:
🔎www.canva.com/
4 окт 2024
