Vamos começar com o botão de envio. O estado atual do CSS deve parecer assim:
input[type="submit"] {
background-color: #3399FF;
color: #fff;
cursor: pointer;
font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
border: 1px solid #000;
padding: 5px 10px;
width: auto;
}Esta sintaxe leva ao seguinte resultado:
Este é um botão bastante normal. Não está especialmente emocionante em termos de design, mas cumpre bem o seu propósito. No entanto, ele será melhorado um pouco. O resultado final será o seguinte:
Além disso, há um efeito hover. O botão mudará de cor quando o cursor do mouse passar por cima dele.
Se olharem o botão com mais detalhe, perceberão os cantos arredondados. Isso é certamente uma das novidades em CSS que os web designers esperavam há muito tempo. Porque "antigamente" não era possível fazer isso. (Exceção eram, naturalmente, os elementos button, nos quais era possível trabalhar com imagens.)
Agora, é possível aplicar cantos arredondados não apenas em elementos normais da página, mas também em botões.
No rascunho de trabalho do CSS3, existe a propriedade border-radius para isso. Navegadores Mozilla e WebKit oferecem diferentes formas de escrever para um suporte experimental a essa propriedade.
• -moz-border-radius
• -webkit-border-radius
No entanto, atualmente, todos os navegadores modernos suportam cantos arredondados.
Com base nesse conhecimento, a definição de border-radius pode ser feita da seguinte forma:
-webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px;
No entanto, se olharem com mais detalhe, verão que também foi atribuído um degradê ao botão.
Finalmente, é possível fazer isso com as ferramentas CSS disponíveis. Para isso, são usadas as diferentes propriedades de gradient, que são atribuídas à propriedade background. Atualmente, existem várias ferramentas para gerar degradês de cores.
Uma delas, por exemplo, pode ser encontrada no site http://www.css3factory.com/linear-gradients/. Na seguinte sintaxe, foi definido um degradê e os cantos arredondados conhecidos.
No exemplo atual, a sintaxe para o botão é a seguinte:
input[type="submit"] {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
background: -linear-gradient(top, #3e779d, #65a9d7);
padding: 10px 20px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 21px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
width: auto;
}
Como mencionei antes, os botões devem reagir ao passar do mouse sobre eles. Para isso, é usado o conhecido :hover.
#submit:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}O botão também reagirá a outro evento. Para isso, é usado o pseudo-classe :active. Assim, podemos reagir quando o botão é clicado.
#submit:active {
border-top-color: #1b435e;
background: #1b435e;
}
No exemplo atual, quando o botão é clicado, a cor da parte superior e o fundo do botão mudam de cor.
Cantos arredondados para os campos
Os chamados cantos arredondados podem ser aplicados não apenas aos botões, mas também aos campos de entrada. O resultado final pode ser algo assim:
E aqui está a sintaxe correspondente:
input[type="text"], input[type="email"], textarea {
border: 1px solid #bebebe;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Vocês já conhecem as propriedades necessárias para definir cantos arredondados como esses.
Validação de formulário com CSS3
Atualmente, os visitantes podem digitar nos campos de entrada o que quiserem. Não há verificação dos valores inseridos. Isso mudará agora. Os campos serão verificados quanto aos seguintes critérios:
• O campo de Nome deve estar preenchido.
• O campo de E-mail deve conter um endereço de e-mail sintaticamente correto.
• O campo de entrada multi-linhas também deve estar preenchido.
Somente quando esses critérios forem atendidos, o formulário poderá ser realmente enviado.
Para marcar um campo como obrigatório, atribuímos a ele o atributo required. Um campo marcado com ele deve ser preenchido, ou seja, não pode estar vazio.
Uma aplicação correspondente seria assim:
<form> <input type="text" name="name" id="name" value="" required/> </form>
Aqui o navegador verificará se o campo foi preenchido. Se o campo estiver vazio e mesmo assim for tentado enviar o formulário, o navegador deve exibir uma mensagem de erro.
Algo um pouco mais avançado acontece com os campos de e-mail. Eles são atribuídos com type="email" e o atributo required. Agora, não só um valor precisa ser inserido no campo, mas sim um endereço de e-mail correto, caso contrário também haverá uma mensagem de erro ao enviar o formulário.
No total, o formulário pode parecer assim:
<ol>
<li>
<label for="name">Nome:</label>
<input type="text" name="name" id="name" value="" required/>
</li>
<li>
<label for="email">Endereço de E-mail:</label>
<input type="email" name="email" id="email" value="" required/>
</li>
<li>
<label for="comment">Comentário:</label>
<textarea cols="32" rows="7" name="content" id="content" required></textarea>
</li>
<li class="button">
<input type="submit" name="submit" id="submit" value="Enviar" />
</li>
</ol>
Especialmente em formulários mais extensos, pode haver campos obrigatórios, mas também campos que não precisam ser preenchidos necessariamente. Nestes casos, você pode destacar os campos obrigatórios separadamente. O acesso aos campos obrigatórios é feito no CSS por meio de: required.
:required {
background-color: #ff0000;
}Com essa sintaxe, os campos obrigatórios são destacados com uma cor de fundo vermelha.
Outra maneira de chamar a atenção para campos obrigatórios é a seguinte sintaxe:
input:required:focus {
border: 1px solid red;
outline: none;
}
Quando você tenta enviar o formulário, o primeiro campo recebe uma borda vermelha e o foco, se ele não foi preenchido ou não atende aos requisitos de validação.
Se um usuário preenche corretamente este campo, mas há outro campo não preenchido, ele será focado também após o próximo envio e terá uma borda vermelha.
