Como já falámos e fomentámos anteriormente, CSS3 é um grande passo no que toca à criação e estilização de páginas web. CSS3 é a última geração de folhas de estilo, introduzindo bastantes novidades como as sombras, animações, transições, entre muitos outros efeitos. Actualmente já praticamente todos os navegadores suportam CSS3 tal como HTML5 – esta dupla chegou e bateu pé, prometendo revolucionar a web. Neste artigo vamos-lhe dar uma dica que poderá aplicar facilmente nos seus projectos web, irá aprender Como criar um campo de pesquisa estilizado com CSS3!

1. CRIAR FORMULÁRIO

O primeiro passo é a criação do formulário onde irão ser introduzidos os termos de pesquisa, e o botão de envio da pesquisa. O formulário deverá ser criado num documento HTML, se não sabe como criar um novo documento HTML e procura um editor de código, consulte o nosso Guia Dreamweaver onde poderá aprender como dominar a ferramenta da Adobe e criar os seus documentos HTML sem dificuldade. Crie um novo documento HTML com o nome index.html e insira o seguinte código dentro da tag <body>:

<section id="wrapper">
	<h1>Campo de pesquisa CSS3</h1>
		<div id="main">
			<form>
				<input type="text" id="pesquisar" value="Escreva aqui" onFocus="if(this.value=='Escreva aqui')this.value='';">
				<input type="submit" class="solid" value="Pesquisar">
			</form>
		</div>
</section>

Este código irá criar o campo de pesquisa e o botão de envio. De salientar uma particularidade que é utilizada frequentemente nas páginas web, que é introduzir um texto guia dentro do campo de pesquisa, que irá desaparecer automaticamente quando o utilizador clica no campo para introduzir as suas palavras de pesquisa – neste caso introduzimos apenas “Escreva aqui”. O resultado até ao momento deverá ser o seguinte:

Como criar um campo de pesquisa estilizado com CSS3!

2. CRIAR ESTILIZAÇÃO

O próximo passo é criar o ficheiro de estilização do documento e ligá-los. Crie um novo documento CSS com o nome style.css e introduza o trecho de código abaixo:

#main {
	width: 400px;
	height: 50px;
	background: #f2f2f2;
	padding: 6px 10px;
	border: 1px solid #b5b5b5;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
	-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
	box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}

De seguida vá ao seu ficheiro HTML index.html e insira o seguinte código dentro da tag <head>:

<link rel="stylesheet" href="style.css">

Este pequeno trecho de código irá fazer a ligação entre o ficheiro HTML e o ficheiro CSS – Ambos os ficheiros deverão estar na mesma pasta, caso contrário deve ser inserido o caminho para o ficheiro style.css correctamente. Até ao momento o resultado deverá ser o seguinte:

Como criar um campo de pesquisa estilizado com CSS3!

3. CRIAR ESTILIZAÇÃO – CONTINUAÇÃO

A estilização ainda não terminou, e o próximo passo é estilizar o campo de pesquisa em si. Para tal, insira o seguinte código no seu ficheiro style.css, por baixo do código existente:

input[type="text"] {
	float: left;
	width: 230px;
	padding: 15px 5px 5px 5px;
	margin-top: 5px;
	margin-left: 3px;
	border: 1px solid #999999; 

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; 

	-moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
	-webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
	box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
}

O resultado até ao momento deverá ser o seguinte:

Como criar um campo de pesquisa estilizado com CSS3!

4. CRIAR ESTILIZAÇÃO – CONTINUAÇÃO II

Naturalmente que a estilização ainda não está terminada, pois o botão de envio da pesquisa continua muito pobre em termos visuais. Para estilizar o botão, utilizámos uma palete de cores que sobressai bastante e capta o olhar do visitante – caberá a você decidir qual a melhor cor que se adequa à sua realidade. Insira o seguinte trecho de código no ficheiro style.css, por baixo do código existente:

input[type="submit"].solid {
	float: left;
	cursor: pointer;
	width: 130px;
	padding: 8px 6px;
	margin-left: 20px;
	background-color: #FF0000;
	color: rgba(134, 79, 11, 0.8);
	text-transform: uppercase;
	font-weight: bold;
	border: 1px solid #000000; 

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; 

	text-shadow: 0 1px 2px rgba(180, 5, 5, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9);  

	-moz-box-shadow: inset 0 0 3px rgba(180, 5, 5, 0.6), inset 0 1px 2px rgba(180, 5, 5, 0.7), 0 5px 0 #cc0000, 0 6px 0 #593a11, 0 13px 0 #ccc;
	-webkit-box-shadow: inset 0 0 3px rgba(180, 5, 5, 0.6), inset 0 1px 2px rgba(180, 5, 5, 0.7), 0 5px 0 #cc0000, 0 6px 0 #593a11, 0 13px 0 #ccc;
	box-shadow: inset 0 0 3px rgba(180, 5, 5, 0.6), inset 0 1px 2px rgba(180, 5, 5, 0.7), 0 5px 0 #cc0000, 0 6px 0 #593a11, 0 13px 0 #ccc;
	-webkit-transition: background 0.2s ease-out;
}

input[type="submit"].solid:hover, input[type="submit"].solid:focus {
    background: #ffd842;   

    -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
}

Quando passar com o rato por cima do botão, deverá mudar de cor. O resultado até ao momento deverá ser o seguinte:

Como criar um campo de pesquisa estilizado com CSS3!

5. BÓNUS

O bónus é um efeito visual que irá introduzir no seu botão, pelo que quando carregar nele, irá parecer que está realmente a carregar num botão. Para isso, insira o seguinte trecho de código no ficheiro style.css, por baixo do código existente:

input[type="submit"].solid:active {
	background: #f6a000;
	position: relative;
	top: 5px;
	border: 1px solid #702d00; 

	-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
	-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
	box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
}

O resultado final será o seguinte:

Normal:

Como criar um campo de pesquisa estilizado com CSS3!

Com rato em cima:

Como criar um campo de pesquisa estilizado com CSS3!

A clicar:

Como criar um campo de pesquisa estilizado com CSS3!

6. CÓDIGO FINAL

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Escola Criatividade - Campo de pesquisa CSS3</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
	<section id="wrapper">
		<h1>Campo de pesquisa CSS3</h1>
		<div id="main">
			<form>
				<input type="text" id="pesquisar" value="Escreva aqui" onFocus="if(this.value=='Escreva aqui')this.value='';">
				<input type="submit" class="solid" value="Pesquisar">
			</form>
		</div>
	</section>
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

#main {
	width: 400px;
	height: 50px;
	background: #f2f2f2;
	padding: 6px 10px;
	border: 1px solid #b5b5b5;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
	-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
	box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}

input[type="text"] {
	float: left;
	width: 230px;
	padding: 15px 5px 5px 5px;
	margin-top: 5px;
	margin-left: 3px;
	border: 1px solid #999999; 

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; 

	-moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
	-webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
	box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
}

input[type="submit"].solid {
	float: left;
	cursor: pointer;
	width: 130px;
	padding: 8px 6px;
	margin-left: 20px;
	background-color: #FF0000;
	color: rgba(134, 79, 11, 0.8);
	text-transform: uppercase;
	font-weight: bold;
	border: 1px solid #000000; 

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; 

	text-shadow: 0 1px 2px rgba(180, 5, 5, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9);  

	-moz-box-shadow: inset 0 0 3px rgba(180, 5, 5, 0.6), inset 0 1px 2px rgba(180, 5, 5, 0.7), 0 5px 0 #cc0000, 0 6px 0 #593a11, 0 13px 0 #ccc;
	-webkit-box-shadow: inset 0 0 3px rgba(180, 5, 5, 0.6), inset 0 1px 2px rgba(180, 5, 5, 0.7), 0 5px 0 #cc0000, 0 6px 0 #593a11, 0 13px 0 #ccc;
	box-shadow: inset 0 0 3px rgba(180, 5, 5, 0.6), inset 0 1px 2px rgba(180, 5, 5, 0.7), 0 5px 0 #cc0000, 0 6px 0 #593a11, 0 13px 0 #ccc;
	-webkit-transition: background 0.2s ease-out;
}

input[type="submit"].solid:hover, input[type="submit"].solid:focus {
    background: #ffd842;   

    -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
}

input[type="submit"].solid:active {
	background: #f6a000;
	position: relative;
	top: 5px;
	border: 1px solid #702d00; 

	-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
	-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
	box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
}

7. FICHEIROS FONTE

Os ficheiros fonte estão disponíveis para download aqui. Desta forma você terá os ficheiros do tutorial e consequentemente uma base para trabalhar.

Fonte: HongKiat

Abraço e até já!

Comentários dos Alunos

ares batista
18 de Novembro de 2011

parabéns eu estava procurando algo do tipo, mais eu gostaria de modificar aquele do google adsense, sabe se é possivel ? outra coisa eu uso blogger quando eu for hospedar o arquivos .css eu terei que usar outro servidoe, no caso eu só apontaria o link para o arquivo certo ?

aguardo sua resposta.
Responder
- Diogo Espinha
  18 de Novembro de 2011
  
  Ola Ares Batista, pode ser mais explicito em relação ao adsense?
  
  Nunca testei nem tenho a certeza se é possível, mas em principio funcionará apontando para o ficheiro .css, mesmo estando em outro servidor.
  
  Abraço
  Responder
  - Ares Batista
    18 de Novembro de 2011
    
    ok,quando tiver um tempo eu irei testar no buscador do adsense, muito obrigado.
    Responder
Guilherme Vital
18 de Novembro de 2011

Cara, meus parabéns! Adorei o efeito.
Responder
- Diogo Espinha
  18 de Novembro de 2011
  
  Olá Guilherme Vital, obrigado pela sua visita e comentário!
  
  Abraço
  Responder
jose correia
18 de Novembro de 2011

Muito bom é importante estilizar o pesquisador para agarramos os visitantes ao site.
Responder
jose correia
18 de Novembro de 2011

Poderá me explicar esta frase:
“if(this.value==’Escreva aqui’)this.value=”;

nao percebo este codigo.
Responder
- Diogo Espinha
  23 de Novembro de 2011
  
  Com esse código, quando clicar no campo de pesquisa, se o que estiver lá escrito for “Escreva aqui”, ele substitui o conteúdo por nada, limpando o formulário para que o leitor possa escrever as palavras chave para a sua pesquisa.
  
  Abraço
  Responder
Rick
19 de Novembro de 2011

Muito legal o formulário, uma das coisas que eu mais gosto é formatar formulários *–*
Responder
- Diogo Espinha
  23 de Novembro de 2011
  
  Olá Rick, obrigado por comentar!
  
  Abraço
  Responder
Fabio Morais
19 de Novembro de 2011

Muito interessante, poderia me explicar como inserir o código em um tema ou blog WordPress?
Responder
- Diogo Espinha
  23 de Novembro de 2011
  
  Teria de inserir o código HTML em seus ficheiros do tema, e o CSS no ficheiro style.css . Basta explorar um pouco os ficheiros e encontrará rapidamente o local onde editar!
  
  Abraço
  Responder
José Almy
21 de Novembro de 2011

Parabéns! Excelente!
Responder
- Diogo Espinha
  23 de Novembro de 2011
  
  Olá José, obrigado pelo seu comentário!
  
  Abraço
  Responder
Estevão
5 de Janeiro de 2012

PARABÉNS
MUITO BOM

UM ABRAÇO E FELIZ 2012!!!!
Responder
- Diogo Espinha
  5 de Janeiro de 2012
  
  Olá Estevão, obrigado pela sua visita e comentário!
  Feliz 2012 para si, abraço!
  Responder