Formulário 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:

[code language=”html”]

Cadastro



[/code]

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:
[code language=”css”] #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;
}

#cadastro fieldset {
margin: 0 0 10px 0;
border: none;
}

#cadastro label {
display: block;
font-weight: bold;
line-height: 1.4;
color: #FA8072;
color: rgba(250, 128, 114, 0.7);
text-shadow: 0 1px 1px #fff;
}
[/code]

Formulário em CSS - InicialOs 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.

[code language=”css”] #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;
}
[/code]

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:

[code language=”css”] #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);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
[/code]

O resultado até agora é:
Formulário com CSS3 - Imagem 02

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 navagação para o usuário. Com a ajuda do atributo CSS3 box-shadow trabalharemos esse efeito:

[code language=”css”] #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-shadow: 0 0 7px rgba(51, 204, 255, 0.5);
}
[/code]

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

Formulário em CSS3 - Imagem 03

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:

[code language=”css”] @-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);
}
}
[/code]

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

[code language=”css”] #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;
}
[/code]

Assim, o nosso formulário está pronto – a parte front-end, é claro 😉 O usuário tem sua experiência com o site enriquecida, o que acaba trazendo mais confiança e credibilidade a suas páginas, além de um visual bacana sem a necessidade de apelar para o Flash. Não se esqueça, entretanto, de sempre fazer uma combinação de cores correta. Se ainda pinta um pontinha de dúvida, ou falta inspiração, é sempre bom consultar o ColourLovers, que traz várias paletas e te permite a busca por cores.

Se quiser baixar os arquivos desse tutorial, clique aqui. Não se esqueça de curtir nossa página no Facebook! E até a próxima 😉



// Comente!

comentários

eufacoprogramas

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

// Seja o primeiro a comentar!