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!

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á!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. 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.



    • 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



      • Ares Batista
        18 de novembro de 2011

        ok,quando tiver um tempo eu irei testar no buscador do adsense, muito obrigado.



  2. Guilherme Vital
    18 de novembro de 2011

    Cara, meus parabéns! Adorei o efeito.



    • Diogo Espinha
      18 de novembro de 2011

      Olá Guilherme Vital, obrigado pela sua visita e comentário!

      Abraço



  3. jose correia
    18 de novembro de 2011

    Muito bom é importante estilizar o pesquisador para agarramos os visitantes ao site.



  4. jose correia
    18 de novembro de 2011

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

    nao percebo este codigo.



    • 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



  5. Rick
    19 de novembro de 2011

    Muito legal o formulário, uma das coisas que eu mais gosto é formatar formulários *–*



    • Diogo Espinha
      23 de novembro de 2011

      Olá Rick, obrigado por comentar!

      Abraço



  6. Fabio Morais
    19 de novembro de 2011

    Muito interessante, poderia me explicar como inserir o código em um tema ou blog WordPress?



    • 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



  7. José Almy
    21 de novembro de 2011

    Parabéns! Excelente!



    • Diogo Espinha
      23 de novembro de 2011

      Olá José, obrigado pelo seu comentário!

      Abraço



  8. Estevão
    5 de janeiro de 2012

    PARABÉNS
    MUITO BOM

    UM ABRAÇO E FELIZ 2012!!!!



    • Diogo Espinha
      5 de janeiro de 2012

      Olá Estevão, obrigado pela sua visita e comentário!
      Feliz 2012 para si, abraço!



  9. Pedro Henrique
    1 de fevereiro de 2013

    Muito bom post, estava em busca de criar meu próprio campo e não conseguia editar as cores, pois pegava um código pronto, e você não, ensinou a fazê-lo passo a passo, muito obrigado mesmo.



  10. geisson
    12 de março de 2013

    Boa tarde, estou tentando fazer uma caixa de pesquisa com dois botões, uma que pesquise em um site específico e outro em outro site, existe essa possibilidade?



  11. Joao Moraes
    29 de março de 2013

    Bom dia.

    Essa busca vai ser feita em que local? Pode ser um text, uma imagem ou os dois juntos, em qualquer página criada?



  12. sonia
    23 de junho de 2014

    Boa tarde,trabalho com NVU.
    Salvei o NVU :
    - 1 documento index.html
    - 1 documento style.css

    Quando foi em ferramenta CSS, crio o arquivo style.css, mas não tenho opção de escrever o código.
    Como faço?
    Grata.



  13. Mauricio
    6 de maio de 2015

    Ele diferencia palavras com e ou sem acentuação? Se pesquisar uma palavra sem acento ele vai “achar” a que está com acento?



  14. rey das damas
    23 de outubro de 2015

    achei util


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz