7 Modelos para Caixa de Pesquisa

Olá pessoinhas como vão?? Bom, hoje já é o segundo dia do mês de Dezembro, bem eu espero que o Natal seja ótimo néh?? Então aonde vocês vão passar o natal??

Vamos ao assunto. Encontrei umas caixa de pesquisa para vocês, encontrei elas no blog The Moon Reverse. Espero que gostem de montão das caixinhas bejus >3<

01. Antes de usá-los cole isso abaixo em um gadget de Html/Javascript.

<form action="/search" class="search" method="get"> <input class="searchbar" id="s" name="q" type="text" value="Texto que vai querer por..." /> <input class="searchbut" type="submit" value="Go" /> </form>

   

 

01. Cole o código abaixo acima de ]]></b:skin>

.search{ /* Nesta parte não mude NADA */

float: center;

font-family: silkscreen;

font-size: 8px;

}

.searchbar{

width: 180px;

background: #ffdbc1;

box-shadow: inset 0 0 22px #ffc8a2, 0 0 4px #ffc8a2;

font-family: Verdana;

font-size: 12px;

font-style: italic;

color: #ffbd8d;

text-shadow: 1px 1px 2px #fff7f2;

padding-top: 8px;

padding-bottom: 8px;

padding-left: 8px;

padding-right: 8px;

border: 1px solid #ffc194;

-webkit-border-top-left-radius: 20px;

-webkit-border-top-right-radius: 20px;

-moz-border-radius-topleft: 20px;

-moz-border-radius-topright: 20px;

border-top-left-radius: 20px;

border-top-right-radius: 20px;

}

.searchbut{

width: 50px;

background: #ffa6ae;

box-shadow: inset 0 0 22px #ff8f99, 0 0 4px #ff8f99;

text-shadow: 1px 1px 0px #ff4d5d;

color: #fff;

border: 1px solid #ff9ca5;

padding-top: 5px;

padding-bottom: 5px;

padding-left: 5px;

padding-right: 5px;

-webkit-border-radius: 40px;

-moz-border-radius: 40px;

border-radius: 40px

}

   

 

01. Cole o código abaixo acima de ]]></b:skin>

.search{ /* Nesta parte não mude NADA */

float: center;

font-family: silkscreen;

font-size: 8px;

}

.searchbar{

width: 170px;

background: #fff;

box-shadow:  0 0 0px #ffc8a2;

font-family: Verdana;

font-size: 12px;

font-style: italic;

color: #ebebeb;

text-shadow: 0px 0px 0px #fff7f2;

padding-top: 8px;

padding-bottom: 8px;

padding-left: 8px;

padding-right: 8px;

border: 1px solid #ebebeb;

}

.searchbut{

width: 50px;

background: #ffadb5;

box-shadow: inset 1px 1px 0px #ffbec4, 0 0 0px #ff8590;

text-shadow: 1px 1px 0px #ff4d5d;

color: #fff;

border: 1px solid #ff6674;

margin-right: 5px;

padding-top: 7px;

padding-bottom: 7px;

padding-left: 5px;

padding-right: 5px;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

}

.search { /* Não apague, geral da caixinha */

float: center;

margin-top: 3px;

margin-bottom: 1px;

}

.searchbar {

width: 199px;

padding-top: 3px;

padding-bottom: 3px;

padding-left: 4px;

padding-right: 3px;

background: #f9f9f9;

border: #f0f0f0 solid 1px;

font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;

font-size: 9pt;

letter-spacing: .1em;

text-transform: lowercase;

color: #ccc;

text-shadow: 1px 1px 0 #ffff;

box-shadow: inset 1px 1px 0 #fff;

outline: none;

}

.searchbar:hover { outline: none;}

.searchbut { /* Botão da pesquisa */

margin-left: -8px;

background: rgb(255,232,236);

border: #ffcfd7 1px solid;

box-shadow: inset 0 12px 0 #ffeef1;

font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;

font-size: 9pt;

letter-spacing: .1em;

color: #fff;

text-shadow: 1px 1px 0 #ffcfd7;

padding-top: 3px;

padding-bottom: 3px;

padding-left: 4px;

padding-right: 3px;

}

.search { /* Não apague, geral da caixinha */

float: center;

margin-top: 3px;

margin-bottom: 1px;

}

.searchbar {

width: 194px;

padding-top: 3px;

padding-bottom: 3px;

padding-left: 4px;

padding-right: 3px;

background: #ede7ec;

border: #ddd2dc solid 1px;

font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;

font-size: 9pt;

letter-spacing: .1em;

text-transform: lowercase;

color: #d2c3d1;

box-shadow: inset 1px 1px 0 #f3eff3;

outline: none;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

}

.searchbar:hover { outline: none;}

.searchbut { /* Botão da pesquisa */

margin-left: -5px;

background: #e6ebef;

border: #d0dbe4 1px solid;

box-shadow: inset 0 12px 0 #eef2f5;

font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;

font-size: 9pt;

letter-spacing: .1em;

color: #fff;

text-shadow: 1px 1px 0 #d0dbe4;

padding-top: 3px;

padding-bottom: 3px;

padding-left: 4px;

padding-right: 3px;

-webkit-border-top-right-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

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

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

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

}

 

.search { /* Não apague, geral da caixinha */
float: center;
margin-top: 3px;
margin-bottom: 1px;
}
.searchbar {
width: 194px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 4px;
padding-right: 3px;
background: #ffedf0;
border: #ffd9df solid 1px;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
font-size: 9pt;
letter-spacing: .1em;
text-transform: lowercase;
color: #ffc1ce;
box-shadow: inset 1px 1px 0 #fff;
outline: none;
}
.searchbar:hover { outline: none;}
.searchbut { /* Botão da pesquisa */
margin-left: -5px;
background: #f8f8f8;
border: #ebebeb 1px solid;
box-shadow: inset 1px 1px 0 #fff;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
font-size: 9pt;
letter-spacing: .1em;
color: #dedede;
text-shadow: 1px 1px 0 #fff;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 4px;
padding-right: 3px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}

01.  Cole acima de ]]></b:skin> o código do blockquote abaixo.

.searchbar{

height: 20px;

width: 200px;

border-radius: 2px;

background-color:#c83147; /* Cor de fundo */

box-shadow: inset 0 0 5px #b42c3f, 0 0 3px #b42c3f; /* Sombra interna */

border: 1px solid #9f2738; /* Borda da caixinha */

text-align:center;

color:#fff !important;

font-size: 8px;

font-family: silkscreen;

text-shadow: 1px 1px 1px #9f2738; /* Sombra do texto, deixe-a escura */

}

.searchbut{

background: url('Url do botão');

width:00px; /*Largura do botão*/

height:00px; /*altura do botão*/

border: 0;

padding:10px;

-webkit-transition-duration: .50s;

}

.searchbut:hover{

background: url('Url do botão');

width:00px; /*Largura do botão*/

height:00px; /*altura do botão*/

border: 0;

padding:10px;

-webkit-transition-duration: .50s;}

02.  Repita o mesmo processo do outro e acima de ]]></b:skin> cole o código abaixo.

.search{

float: center;

}

.searchbar{

height: 22px;

width: 100px;

border-radius: 3px;

padding: 5px 5px 5px 50px; /* Espaçamento interno */

background: url('http://static.tumblr.com/74tqsur/iHUmmph2z/3f_009.png') no-repeat 10px; /* Botão */

background-color: #b6d1db;

border: 1px solid #a5c6d2;

box-shadow: 0 0 3px #94bbca; /* Sombra externa */

text-align:center;

color:#fff !important;

font-size: 10px;

-webkit-transition-duration: .30s;

}

.searchbar:hover{

height: 22px;

width: 100px;

border-radius: 3px;

padding: 5px 5px 5px 50px; /* Espaçamento interno */

background: url('http://static.tumblr.com/ifqwhnb/kGrm2tvhv/se.png') no-repeat 10px; /* Botão hover */

background-color: #b6d1db;

border: 1px solid #a5c6d2;

text-align:center;

color:#fff !important;

font-size: 10px;

-webkit-transition-duration: .30s;

}