Tutorial: Modelos de Caixa de Pesquisa

Heloo Pessoinhas da Terra (não de marte) Estava aqui sem fazer nada, e resolvi catar umas coisinhas diferentes para blog, e quis fazer um post para vocês, super fofo, Achei umas caixas de pesquisa super lindas, e em uns modelos diferentes do que costume ver. Tomará que gostem.

Modelo 1

1. Layout>> Adicionar um Gadget>> HTML/JavaScript e colar o código do modelo da caixinha que queres.

<style>
.search{
float: left;
}
.searchbar{
background: #ffcccc;
height: 25px;
width: 222px;
border: none;
-webkit-box-shadow: inset 0px 0px 2px #dce8ea;
-moz-box-shadow: inset 0px 0px 2px #dce8ea;
-ms-box-shadow: inset 0px 0px 2px #dce8ea;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
border: 1px solid #ff7766;
font-family: 12px Open Sans;
box-shadow: inset 1px 1px 0px #fff;
text-shadow: 1px 1px 0px #ff7766;
float: left;
margin: 5px;
color:#fff;
text-align: center;
}
</style>
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='' type="text" value="" />
</form>

Modelo 2

<style>
.search{
float: left;
}
.searchbar{
background: #ffcccc;
height: 25px;
width: 222px;
border: none;
border-radius: 15px;
border: 1px solid #ff7766;
font-family: 12px Open Sans;
box-shadow: inset 1px 1px 0px #fff;
text-shadow: 1px 1px 0px #ff7766;
float: left;
margin: 5px;
color:#fff;
text-align: center;
}
</style>
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='' type="text" value="" />
</form>

Modelo 3

<style>
.search{
float: left;
}
.searchbar{
background: #ffcccc;
height: 25px;
width: 222px;
border: none;
border-radius: 0px 100px 100px 0px;
border: 1px solid #ff7766;
font-family: 12px Open Sans;
box-shadow: inset 1px 1px 0px #fff;
text-shadow: 1px 1px 0px #ff7766;
float: left;
margin: 5px;
color:#fff;
text-align: center;
}
</style>
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='' type="text" value="" />
</form>

background: cor do fundo da caixa de pesquisa:

border: cor da borda;

text shadow: sombra do texto;

color: cor das letras.

CRÉDITOS AO BLOG: blog de meninas