Tags:Simples Input com background-image!
em 15 de abril de 2010 e possui 5.423 Visualizações
Olá pessoal! Bom vamos ver como fazer que os inputs dos seus formulários, de contato ou de login, qualquer tipo de formulario tenha um background personalizado, aquele que você desenhou no Photoshop, no Gimp, no seu programa de desenho de layouts.
É muito simples. Primeiramente desenhamos nossos campos, que sera o background do nosos input.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="PtBr" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> <title>Input com background-image!</title>Um cabeçalho bem estruturado sempre ajuda na validação do seu código, e no funcionamento perfeito no Internet Explorer que sempre nos trás problemas. Nossa CSS fica mais ou menos assim
<style type="text/css">
fieldset {width:210px;} /* coloquei um tamanho em meu fieldset para que ele não tenha o tamanho da página toda */
.login {width:198px; height:32px; background-image:url(login.png);} /* uma div para colocarmos o nosso background do campo login */
.senha {margin-top:10px; width:198px; height:32px; background-image:url(senha.png);} /* uma div para colocarmos o nosso background do campo senha */
input.name {width:130px; margin:7px 0 0 60px; float:left; border:1px solid #fff; background:none;} /* condiguro meu input login para que ele fique certinho em cima do background */
input.password {padding:0 0 0 2px; width:130px; margin:7px 0 0 60px; float:left; border:1px solid #fff; background:none;} /* condiguro meu inputsenha para que ele também fique certinho em cima do background */
input.submit {margin-top:10px;} /*meu input submit não temos nenhuma estilização de cores e etc. Apenas empurrei ele um pouco para baixa para termos um espaçamento */
label{display:none;} /* como ja tenho Login e Senha escritos no background, a label não sera necessária, mas para ser válido em xhtml temos que fazer ele corretamente, apenas fazendo ela ficar invisível, para que não apareça seu valor */
</style>
Agora em nosso código XHTML:
<div id="formail"> <!-- uma div principal para que o form fique dentro --> <form action=""> <!-- a action do form --> <fieldset><!-- nosso fieldset que demos um tamanho para que não ficace do tamanho da tela --> <div class="login"> <label>Login</label><input type="text" value="" name="login" /> <!-- nosso input login dentro da div que possui o background --> </div> <div class="senha"> <label>Senha</label><input type="password" value="" name="senha" /> <!-- nosso input senha dentro da div que possui o background --> </div> <input type="submit" value="Enviar" name="submit" /> </fieldset> </form> </div>Código completo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="PtBr" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<title>Input com Background Separado by Anderson Narciso</title>
<style type="text/css">
fieldset {width:210px;}
.login {width:198px; height:32px; background-image:url(login.png);}
.senha {margin-top:10px; width:198px; height:32px; background-image:url(senha.png);}
input.name {width:130px; margin:7px 0 0 60px; float:left; border:1px solid #fff; background:none;}
input.password {padding:0 0 0 2px; width:130px; margin:7px 0 0 60px; float:left; border:1px solid #fff; background:none;}
input.submit {margin-top:10px;}
label{display:none;}
</style>
</head>
<body>
<div id="formail">
<form action="">
<fieldset>
<div class="login">
<label>Login</label><input type="text" value="" name="login" />
</div>
<div class="senha">
<label>Senha</label><input type="password" value="" name="senha" />
</div>
<input type="submit" name="submit" />
</fieldset>
</form>
</div>
</body>
</html>
Muito simples não é pessoa?
Resultado: [link]
Espero que seje útil, e até a próxima!
por Flossyvok
waiting for next post
29 de junho de 2010