terça-feira, 30 de setembro de 2014

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

2 comentários:

  1. Adorei o terceiro formato, vou usar haha ><

    xoxo // http://ninascovers.blogspot.com.br/

    ResponderEliminar
    Respostas
    1. Lindo ne ? *^* Ainda bem que lhe foi util!

      Eliminar