Criando um formulário simples com CSS3

Nesse tutorial trabalharemos em um formulário de cadastro de email simples, utilizando CSS3 a fim de enriquecer a experiência do usuário.

O primeiro passo será criar um formulário simples, como o código abaixo:

<form id="cadastro" action="post">
<h3>Cadastro</h3>
<fieldset><label for="nome">Seu nome é:</label>
<input id="nome" type="text" /></fieldset>
<fieldset><label for="email">Seu email é:</label>
<input id="email" type="text" /></fieldset>
<fieldset><input type="submit" value="Cadastrar" /></fieldset>
</form>

Para o CSS inicial, utilizei o código abaixo – o efeito visual você pode ver na imagem após o código. Até aqui utilizamos:

#cadastro{
background-color: rgba(250, 128, 114, 0.2);
border-radius: 12px;
padding: 10px;
width: 300px;
margin: 0 auto;
}

#cadastro h3{
font-family: Monotype Corsiva;
font-size: 24px;
color: #FA8072;
color: rgba(250, 128, 114, 0.8);
text-shadow: 3px 3px 3px #fff;
}

Os atributos CSS3 utilizados acima foram tratados em tutoriais anteriores e você pode conferir também os atributos CSS3 mais utilizados atualmente. Lembre-se sempre de, ao usar o modelo de cores RGBA, definir também o modelo de cores RGB ou hexadecimal, caso o navegador não suporte o primeiro caso.

Nosso próximo passo será estilizar os textbox, ou inputs do tipo texto. Para isso, crie uma classe CSS do tipo #cadastro input. Contudo, se trabalharmos dessa maneira, dos os objetos do tipo input serão estilizados da mesma maneira, inclusive o botão, que é um input do tipo submit. Para resolver esse problema crie duas classes em seu documento: #cadastro input[type=”text”] e #cadastro input[type=”submit”] .

Iniciarei a estilização dos campos de texto, utilizando atributos que você também encontra nos tutoriais anteriores.

#cadastro input[type="text"] {
width: 215px;
padding: 5px 8px;
font-size: 12px;
color: #666;
border: none;
background-color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}

Crie um estilo também para o botão, adicionando bordas arredondadas, mudando sua cor de fundo, adicionando um sombra e o que sua imaginação mandar. Para o nosso exemplo, utilizei o código abaixo:

#cadastro input[type="submit"]{
padding: 8px 15px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 1;
color: #444;
border: none;
background-color: #fff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
-o-border-radius: 23px;
border-radius: 23px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

O resultado até agora é a imagem abaixo:

Um efeito bacana que podemos aplicar é enfatizar um textbox quando o usuário está digitando no mesmo. É algo simples e que traz uma boa experiência de navegação para o usuário. Com a ajuda do atributo CSS3 box-shadow trabalharemos esse efeito:

#cadastro input[type="text"]:focus {
-webkit-box-shadow: 0 0 7px rgba(51, 204, 255, 0.5);
-moz-box-shadow: 0 0 7px rgba(51, 204, 255, 0.5);
box

O que você vê na tela é o seguinte:

Para o botão utilizaremos um efeito diferente e para um momento diferente – trabalharemos com o hover e com uma animação, se lembra delas? Como já vimos no tutorial “Criando uma animação com CSS3“, definiremos uma animação do tipo pulse, em que a sombra do botão terá um efeito de pulsante, quando o usuário estiver com o mouse sobre o mesmo.

Dentro de sua folha de estilos, crie a seguinte animação:

@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2);
}
50% {
-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.9);
}
100% {
-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2);
}
}

@-moz-keyframes pulse {
0% {
-moz-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2);
}
50% {
-moz-box-shadow: 0 0 12px rgba(51, 204, 255, 0.9);
}
100% {
-moz-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2);
}
}

@-o-keyframes pulse {
0% {
-o-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2);
}
50% {
-o-box-shadow: 0 0 12px rgba(51, 204, 255, 0.9);
}
100% {
-o-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2);
}
}

Adicione também a chamada a sua animação para o hover do botão:

#cadastro input[type="submit"]:hover {
-webkit-animation: pulse 1.5s infinite ease-in-out;
-moz-animation: pulse 1.5s infinite ease-in-out;
-o-animation: pulse 1.5s infinite ease-in-out;
}

Assim, o nosso formulário está pronto – a parte front-end, é claro ????

Se quiser baixar os arquivos desse tutorial, clique aqui. E até a próxima 😉

// Comente!

comentários