Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/zaQdT.jpg&key=3c52db6b7389d6ae38aabf8798eca9b46f05231dfcc18e96cd470f7536fc8419" alt="zaQdT.jpg" />
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;
}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);
}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);
}border: 1px solid #e5e5e5;
background: #f5f5f5;
}-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.