samedi 5 mai 2012

Formulário de pesquisa simples e em diversas cores usando CSS3 e HTML5

A gente, do CSS ao Extremo, criamos pra você um simples formuláiro de pesquisa em diversas cores. Usando CSS3 para as sombras e HTML5 para o placeholder e x-webkit-speech, o formulário é elegante (mesmo sendo simples). Nas cores laranja, azul, vermelho, amarelo, verde e cinza, você escolhe o melhor para o seu site.


HTML (Blogger)

<div class="pesquisa-form">
<form name="imput" action="/search" method="get">
<input type="text" class="mini-search" name="q" x-webkit-speech="true" placeholder="Faça uma busca..."/>
<input class="pesquisa-submit-laranja" type="submit" name="submit" value="Pesquisar" /></form>
</div>

HTML (WordPress)

<div class="pesquisa-form">
<form method=”get” action=”/index.php”>
<input class="mini-search" type=”text” name=”s” x-webkit-speech="true" placeholder="Faça uma busca..."/>
<input class="pesquisa-submit-cinza" type="submit" value="Pesquisar" /></form>
</div>

CSS laranja

/* --- Pesquisa Laranja --- */
.pesquisa-submit-laranja{
height:37px;
position:relative;
left:-4px;
color:#fff;
font-size:15px;
margin-left:-3px;
width:92px;
line-height:1.2em;
background: #f77f2a;
border: 1px solid #eca958;
-o-border-top-right-radius:5px;
-o-border-bottom-right-radius:5px;
-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
}
.pesquisa-submit-laranja:active {
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-o-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
}

CSS azul

/* --- Pesquisa Azul --- */
.pesquisa-submit-azul{
height:37px;
position:relative;
left:-4px;
color:#fff;
font-size:15px;
margin-left:-3px;
width:92px;
line-height:1.2em;
background: #2d56b1;
border: 1px solid #2d56b1;
-o-border-top-right-radius:5px;
-o-border-bottom-right-radius:5px;
-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
}
.pesquisa-submit-azul:active {
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-o-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
}

CSS vermelho

/* --- Pesquisa Vermelho --- */
.pesquisa-submit-vermelho{
height:37px;
position:relative;
left:-4px;
color:#fff;
font-size:15px;
margin-left:-3px;
width:92px;
line-height:1.2em;
background: #e63f38;
border: 1px solid #e63f38;
-o-border-top-right-radius:5px;
-o-border-bottom-right-radius:5px;
-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
}
.pesquisa-submit-vermelho:active {
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-o-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
}

CSS amarelo

/* --- Pesquisa Amarelo --- */
.pesquisa-submit-amarelo{
height:37px;
position:relative;
left:-4px;
color:#fff;
font-size:15px;
margin-left:-3px;
width:92px;
line-height:1.2em;
background: #e6b222;
border: 1px solid #e6b222;
-o-border-top-right-radius:5px;
-o-border-bottom-right-radius:5px;
-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
}
.pesquisa-submit-amarelo:active {
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-o-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
}

CSS verde

/* --- Pesquisa Verde --- */
.pesquisa-submit-verde{
height:37px;
position:relative;
left:-4px;
color:#fff;
font-size:15px;
margin-left:-3px;
width:92px;
line-height:1.2em;
background: #3ca33a;
border: 1px solid #3ca33a;
-o-border-top-right-radius:5px;
-o-border-bottom-right-radius:5px;
-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
}
.pesquisa-submit-verde:active {
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-o-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
}

CSS cinza

/* --- Pesquisa Cinza --- */
.pesquisa-submit-cinza{
height:37px;
position:relative;
left:-4px;
color:#fff;
font-size:15px;
margin-left:-3px;
width:92px;
line-height:1.2em;
background: #bfbfbf;
border: 1px solid #bfbfbf;
-o-border-top-right-radius:5px;
-o-border-bottom-right-radius:5px;
-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
}
.pesquisa-submit-cinza:active {
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-o-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
}

CSS do campo de pesquisa

.mini-search {
height:37px;
padding:4px;
-moz-border-top-left-radius:5px;
-moz-border-bottom-left-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
border-top-left-radius:7px;
border-bottom-left-radius:7px;
border:1px solid #ccc;
width:25%;
text-shadow:0 0 1px #ccc;
font-size:14px;
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-o-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
}
input {outline: none !important;}

São diversas cores a sua escolha.

Aucun commentaire:

Enregistrer un commentaire