- Página Inicial
- Códigos CSS Prontos
- Formulário html com inputs Animado com css Efeito swing Down
- Voltar
Formulário html com inputs Animado com css Efeito swing Down
Neste tutorial vamos criar um Formulário
de contato com os inputs html animado com css com efeito Slide Hidden
Um formulário é um elemento essencial em qualquer site. Ele permite que os visitantes enviem informações sobre si mesmos ou sobre seus negócios.
Como estilizar CSS no HTML?
Podemos estilizar são input , textarea e select mas esteja ciente de que ao estilizar um campo de input não só o campo será estilizado como também os outros inputs como radio boxes, check boxes e os botões Submit (Enviar) e Clear (Limpar). É seguro estilizar font-family e font-size .
O que são formulários HTML?
Formulários HTML são um dos principais pontos de interação entre um usuário e um web site ou aplicativo. Eles permitem que os usuários enviem dados para o web site. Na maior parte do tempo, os dados são enviados para o servidor da web, mas a página da web também pode interceptar para usá-los por conta própria.
Nesta seção, projetaremos uma estrutura simples na tag <div>, <form>, <h1>, <p> , <span>, <input> <label> e a tag <type submit> para inserir o Botão de envio.
Essas são as tags que usaremos para criar o nosso Formulário
.
Vamos Adicionar o HTML
<div class="box-formulario"> <div class="formulario"> <div class="thirteen"> <h1>Fale conosco</h1> </div> <form action="#" method="post"> <span> <input type="text" class="input-swing-down" id="nome" name="nome" placeholder="Nome" autocomplete="off" required=""/> <label for="nome"> <i class="icon icon-user-outline"></i> </label> </span> <span> <input type="text" class="input-swing-down" id="email" name="email" placeholder="E-mail" autocomplete="off" required=""/> <label for="email"> <i class="icon icon-mail-3"></i> </label> </span> <span> <input type="text" class="input-swing-down" id="assunto" name="assunto" placeholder="Assunto" autocomplete="off" required=""/> <label for="assunto"> <i class="icon icon-info"></i> </label> </span> <span> <textarea type="text" class="textarea-swing-down" id="mensagem" name="mensagem" rows="3" placeholder="Mensagem" autocomplete="off" required=""></textarea> <label for="mensagem"> <i class="icon icon-bubble-4"></i> </label> </span> <div class="box-btn"> <button type="submit" class="btn-3d"> <i class="icon icon-forward-1"> Enviar</i> </button> </div> </form> </div> </div><!--Box Formulario-->
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Formulário
.
.thirteen h1 { position: relative; font-size: 18px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; width: 215px; text-align: center; margin: auto; white-space: nowrap; border: 2px solid #dbdbdb; color: #dbdbdb; padding: 5px 11px 3px 11px; border-radius: 3px; } .thirteen h1:before, .thirteen h1:after { background-color:transparent; color: #dbdbdb; position: absolute; font-family: "untitled-font-1"; content: '\e42c'; height: 20px; width: 20px; bottom: 8px; line-height: 20px; font-size: 15px; } .thirteen h1:before { left:-30px; } .thirteen h1:after { right:-30px; } .box-formulario { width: 100%; align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; background-color: #575f60; padding:60px 0; } .formulario { width: 700px; background: #575f60; padding: 60px 5%; text-align: center; } .formulario span { position: relative; display: flex; margin: 45px 10px; } /*input Animado*/ .input-swing-down { display: inline-block; width: 100%; height: 41px; padding: 10px 0 10px 70px; font-family: "Open Sans", sans; font-weight: 400; font-size: 1em; color: #575F60; background: #dbdbdb; border: 0; border-radius: 3px; outline: 0; transition: all .3s ease-in-out; } .input-swing-down::-webkit-input-placeholder { color: #575f60; font-weight: 300; } .input-swing-down + label { display: inline-block; position: absolute; top: 0; left: 0; padding: 10px 22px; text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4); background: #8f9b9c; border-top-left-radius: 3px; border-bottom-left-radius: 3px; transform-origin: 2px 2px; transform: rotate(0); animation: swing-back .4s 1 ease-in-out; } @keyframes swing { 0% { transform: rotate(0); } 20% { transform: rotate(116deg); } 40% { transform: rotate(60deg); } 60% { transform: rotate(98deg); } 80% { transform: rotate(76deg); } 100% { transform: rotate(80deg); } } @keyframes swing-back { 0% { transform: rotate(82deg); } 100% { transform: rotate(0); } } .input-swing-down:focus, .input-swing-down:active { color: #000000; padding: 10px 0 10px 30px; background: #fff; border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-swing-down:focus::-webkit-input-placeholder, .input-swing-down:active::-webkit-input-placeholder { color: #aaa; } .input-swing-down:focus + label, .input-swing-down:active + label { animation: swing 1.4s 1 ease-in-out; transform: rotate(80deg); color: #fff; } /*TextArea*/ .textarea-swing-down { display: inline-block; width: 100%; height: 78px; padding: 10px 0 10px 70px; font-family: "Open Sans", sans; font-weight: 400; font-size: 1em; resize: none; color: #575F60; background: #dbdbdb; border: 0; border-radius: 3px; outline: 0; transition: all .3s ease-in-out; } .textarea-swing-down::-webkit-input-placeholder { color: #575f60; font-weight: 300; } .textarea-swing-down + label { display: inline-block; position: absolute; top: 0; left: 0; padding: 10px 22px; height: 78px; line-height: 60px; text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4); background: #8f9b9c; border-top-left-radius: 3px; border-bottom-left-radius: 3px; transform-origin: 2px 2px; transform: rotate(0); animation: swing-back .4s 1 ease-in-out; } @keyframes swing { 0% { transform: rotate(0); } 20% { transform: rotate(116deg); } 40% { transform: rotate(60deg); } 60% { transform: rotate(98deg); } 80% { transform: rotate(76deg); } 100% { transform: rotate(80deg); } } @keyframes swing-back { 0% { transform: rotate(82deg); } 100% { transform: rotate(0); } } .textarea-swing-down:focus, .textarea-swing-down:active { color: #000000; padding: 10px 0 10px 30px; background: #fff; border-top-left-radius: 0; border-bottom-left-radius: 0; } .textarea-swing-down:focus::-webkit-input-placeholder, .textarea-swing-down:active::-webkit-input-placeholder { color: #aaa; } .textarea-swing-down:focus + label, .textarea-swing-down:active + label { animation: swing 1.4s 1 ease-in-out; transform: rotate(80deg); color: #fff; } /*Botão*/ .box-btn { width: 100%; padding: 0 10px; float: left; } .btn-3d { top: 0; left: 0; transition: all 0.15s linear 0s; display: block; margin: auto; width: 200px; border-radius: 3px; border: none; cursor: pointer; background-color: #8F9B9C; color: #090B0B; letter-spacing: 2px; box-shadow: -6px 6px 0 #393939; text-decoration: none; } .btn-3d:hover { top: 3px; left: -3px; box-shadow: -3px 3px 0 #393939; } .btn-3d:hover::after { top: 1px; left: -2px; width: 4px; height: 4px; } .btn-3d:hover::before { bottom: -2px; right: 1px; width: 4px; height: 4px; } .btn-3d::after { transition: all 0.15s linear 0s; content: ""; position: absolute; top: 2px; left: -4px; width: 8px; height: 8px; background-color: #404040; transform: rotate(45deg); z-index: 1; } .btn-3d::before { transition: all 0.15s linear 0s; content: ""; position: absolute; bottom: -4px; right: 2px; width: 8px; height: 8px; background-color: #404040; transform: rotate(45deg); z-index: 1; } .btn-3d { position: relative; } button:active.btn-3d { top: 6px; left: -6px; box-shadow: none; } button:active.btn-3d:before { bottom: 1px; right: 1px; } button:active.btn-3d:after { top: 1px; left: 1px; } button.btn-3d i { display: block; background:#8F9B9C; font-family: 'open_sansregular'; padding: 15px; z-index: 2; position: inherit; font-style: normal; }
Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Formulário html com inputs Animado com css Efeito swing Down
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
1.412 Visualizações
Deixe um comentário