Modelos de caixa de pesquisa!

YOOOO 200 publicações!!! *^*
Várias leitores e amigos têm me pedido para postar alguns desenhos meus, mas
como eu não gosto lá muito de mostrar o que eu faço, não tenho levado muito a sério..
Passou algum tempo... e a Castor me relembrou da ideia.
Eu quando pensei nisso foi do tipo : "Aahaha, não, já desisti dessa ideia à muito!"
A verdade aqui é: Estou a ficar sem ideias para post, é sempre a mesma "merda": vídeo do mês; tags; conversas defecientes que eu partilho; alguns tutoriais, utiliários e imagens de post que ninguém precisa, web novela que pouco interesse tem, algumas dicas e coisas que me irritam profundamente, e pouco mais. Quero ter novas ideias, variar, e em breve, pronto..irei postar desenhos meus. Agora vamos ao que interessa..

Estive a ver alguns blogues coisa que já não fazia há algum tempo, e tenho visto

tutoriais muito interessantes, úteis e fáceis!

Como vocês têm aqui uma ninja muito lerda, e que gosta de gadgets  HTML/Java Script,

hoje vou publicar um post com algumas caixas de pesquisas muito

bonitas!

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

Modelo 1

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

2. Se quiserem mudar a cor que está em negrito, basta ir aqui ;

background: cor do fundo da caixa de pesquisa:

border: cor da borda;

text shadow: sombra do texto;

color: cor das letras.

3. Para mudar o tamanho, é o que está em itálico.

--------------------------------------------

Créditos: Sweet Cherry