[CSS] Estilizando formulários

[Scotti]

Introdução:

Bom hoje eu estarei ensinando a criar um formulário de contato estilizado, deixando ele mais bonito :D só com css.

 

Desenvolvimento:

Bom primeiro pegamos o formulario que queremos estilizar.

Estarei utilizando esse:

 

 

Bom vamos começar com o css.

É bem simples, porque é a mesma coisa que estar estilizando DIV.

com os comandos input você estara estilizando tudo que estiver com a tag input:

<input .... />

ficara estilizado =P,

bom agora eu peguei o input e o textarea para estilizar ao meu gosto ficando assim \/

 

 

Resultado no html \/:

 

 

Bom o formulário ainda está meio simples, então agora vamos colocar ele com cantos arredondados, com 2 códigos

Esses códigos que fazem a bordar ficar com os cantos arrendados, você inserindo eles no input {

códigos

}

todos os inputs tem sua borda arredonda se eles tiverem borda =P

se não tiverem borda ficara normal.

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 

e o seu formulario ficará assim:

 

 

Bom é isso, estarei me empenhando para estar explicando melhor, pode ter ficado meio confuso, porque é o meu primeiro tutorial, mais é isso ai (Y)

Abraço, espero que goste.

 

Créditos: Pandoraaaa

Editado Agosto 3, 2011 por ScottinG

[AiramCruz™]

Interesante.;

Vai Ajudar Muito Gente Iniciante Em WebDesigner.;

[Fort ♥]

Salve salve Scotting, Sempre com otimos trabalho :unsure:

[BySasuke]

Valeu , ScottinG , sempre nos ajudando , mais nem sabia usa isso , kkk , so muito noob mesmo.

[Scotti]

Isso me quebrou um galho danado, achei que iria ser útil para outros que assim como eu aprendem programação via tutorias =p´

[Bluur]

Muito bom ScottinG ! irá me ajuda mt :wink:

[ST4rN3r0]

Mto bom cara.

Realmente essa bordinha fica mais show que a normal =)

[PaUlO...]

Boa Scotting, Andou aprendendo Css :D

 

Nice !

Editado Agosto 3, 2011 por PaUlO...

[HangLooseE]

Acho que falto algo .

 

Bom o formulário ainda está meio simples, então agora vamos colocar ele com cantos arredondados, com 2 códigos

Esses códigos que fazem a bordar ficar com os cantos arrendados, você inserindo eles no input {

códigos

}

todos os inputs tem sua borda arredonda se eles tiverem borda =P

se não tiverem borda ficara normal.

 

quais sao os codigos ?

[Scotti]

Esqueci de colocar, valeu por avisar =p

 

~~EDIT

Vou mover para tutoriais, creio que seja o melhor lugar pra isso.

Editado Agosto 3, 2011 por ScottinG

[Mayke]

cara muito bom, vou usar aqui!