[Resolvido] Inputs Iguais ao do Novo Visual do Google

[ScottinG 0]

Estou de volta... :P

O que vocês acharam do novo visual que o Google aplicou à todos os seus aplicativos há um tempo atrás? Eu achei maravilwonderful.

 

Vou passar para vocês aqui o CSS que peguei e reorganizei do código fonte do site, que modifica as áreas de texto de seu template.

TODAS as entradas de textos (as chamadas inputs, que estiverem sem uma classe pré-definida) serão modificadas para esta forma, inclusive com os efeitos ao passar o mouse e clicar:

 

Pré-visualização:

 

Código CSS:

input[type=text] {
display: inline-block;
height: 29px;
margin: 0;
padding-left: 8px;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
input[type=text]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
input[type=text]:focus {
outline: none;
border: 1px solid #4d90fe;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
input[type=text][disabled=disabled] {
border: 1px solid #e5e5e5;
background: #f5f5f5;
}
input[type=text][disabled=disabled]:hover {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

 

Veja o código funcionando no próprio Orkut!

 

é só copiar o código, colocar no arquivo do CSS de seu site e ser feliz!

Caso não haja um arquivo CSS, cole entre as tags e do seu template, o código postado acima dentro de:

<style tipe="text/css">

Código aqui

</style>

 

Código do Botão:

  .g-button-submit {
 border: 1px solid #3079ed;
 color: #fff;
 text-shadow: 0 1px rgba(0,0,0,0.1);
 background-color: #4d90fe;
 background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
 background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
 background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
 background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
 background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
 background-image: linear-gradient(top,#4d90fe,#4787ed);
 }
 .g-button-submit:hover {
 border: 1px solid #2f5bb7;
 color: #fff;
 text-shadow: 0 1px rgba(0,0,0,0.3);
 background-color: #357ae8;
 background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#357ae8));
 background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
 background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
 background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
 background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
 background-image: linear-gradient(top,#4d90fe,#357ae8);
 }
 .g-button-submit:active {
 -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
 -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
 box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
 }

 

Para mudar o design do botão, você precisa indexar a classe no seu botão, adicionando o código em negrito:

 

<input type="submit" class="g-button-submit" value="Login">

 

Bom uso :)

Os créditos são do próprio Google.com, edição e remoção de códigos inúteis são de minha autoria.