Como criar um formulário de contato com CSS3

(1)

Fábio Cabrero <fabiocabrero@gmail.com> Fábio Cabrero <fabiocabrero@gmail.com>

Como criar um formulário de contato com CSS3 - Escola Criatividade

1 mensagem

Templates para Blogger e Joomla

Templates para Blogger e Joomla <<ggeerraall@@eessccoollaaccrriiaattiivviiddaaddee..ccoomm>> 14 14 dde e jjuunnhho o de de 2200112 2 1166::1111 Para:

Para: fabiocabrfabiocabrero@gmail.comero@gmail.com

Como

criar u

m fo

rmu

lár

io

de contato com

CSS3 - Esco

la Criatividad

e

Posted: 14 Jun 2012 09:02 AM PDT

CSS é a abreviatura de Cascade Styling Sheet, que significa Folha de Estilo em Cascata, e é a linguagem utilizada para controlar a CSS é a abreviatura de Cascade Styling Sheet, que significa Folha de Estilo em Cascata, e é a linguagem utilizada para controlar a apresentação de elementos em doc

apresentação de elementos em doc umentos HTumentos HTML. ML. A A apresentação destes é especifapresentação destes é especificada por icada por uma sériuma série de e de regras que podem serregras que podem ser atribuídas em l

atribuídas em linha através dos atributos do elemento inha através dos atributos do elemento style ou atravstyle ou atrav és de rés de r egras incluíegras incluídas dentro das tags <style> </style> nadas dentro das tags <style> </style> na secção

secção head dos dohead dos do cumentos HTcumentos HTML, ou através de folhas de estilo externas (VerML, ou através de folhas de estilo externas (Ver TutorialTutorial: Aprender o : Aprender o básico sobre básico sobre CSCSSS). Neste). Neste artigo vamos-lhe demonstrar como criar um fantástico formulário de contato com HTML e CSS3 para surpreender os seus artigo vamos-lhe demonstrar como criar um fantástico formulário de contato com HTML e CSS3 para surpreender os seus v

v isitisit antant es ces c om om um um lolo ok aok a rrrr ojoj ado ado e e de qde q ualual idaida dede , fo, fo rnerne cece ndo ndo umum a a vv ia pia p ara ara os os seuseu s s leilei toto rere s e vs e v isitisit anteante s o s o coco ntanta tartar em em rara pidpid amam entent e.e. Es

Este artigo é baseado no te artigo é baseado no formulariformulario de o de contato apresentado pelos cocontato apresentado pelos co legas da Voosh Themes, tendo sido adaptado com legas da Voosh Themes, tendo sido adaptado com algumasalgumas alterações especialmente para si. Se é um curioso pela linguagem CSS, recomendamos a leitura dos seguintes artigos:

alterações especialmente para si. Se é um curioso pela linguagem CSS, recomendamos a leitura dos seguintes artigos: Programação CSS para iniciantes (Parte I)

Programação CSS para iniciantes (Parte I) Programação CSS para iniciantes (Parte II) Programação CSS para iniciantes (Parte II) Programação CSS para iniciantes (Parte III) Programação CSS para iniciantes (Parte III) Programação CSS para iniciantes (Parte IV) Programação CSS para iniciantes (Parte IV) Programação CSS para iniciantes (Parte V) Programação CSS para iniciantes (Parte V) Programação CSS para iniciantes (Parte VI) Programação CSS para iniciantes (Parte VI) Programação CSS para iniciantes (Parte VII) Programação CSS para iniciantes (Parte VII) Programação CSS para iniciantes (Parte VIII) Programação CSS para iniciantes (Parte VIII) Programaç

Programação CSS ão CSS para iniciantes (Parte Ipara iniciantes (Parte IX)X) Programaç

Programação CSS ão CSS para iniciantes (Parte X)para iniciantes (Parte X) Programaç

Programação CSS ão CSS para iniciantes (Parte XI)para iniciantes (Parte XI) Programação CSS para iniciantes (Parte XII) Programação CSS para iniciantes (Parte XII) A

A crcr iaçiaç ão ão de de forfor mulmul áriári os os de de coco ntanta to to bobo nitonito s s e e atratr aenaen tes tes nono rmrm almalm entent e e signsign ificific a a a a utiuti lizaliza çãçã o o de de imaima gengen s s e e algalg uns uns trutru ququ eses Javascript / jQuery, mas neste tutorial vamos criar um fantástico fomulário de contato utilizando apenas HTML5 e CSS3. Iremos Javascript / jQuery, mas neste tutorial vamos criar um fantástico fomulário de contato utilizando apenas HTML5 e CSS3. Iremos utilizar um conjunto

utilizar um conjunto diferentes técnicas CSdiferentes técnicas CSS S para estilpara estilizar o fizar o formuormu lário, desde lário, desde gradientes, sombrgradientes, sombr as, cantos as, cantos arredoarredo ndados endados e algumas simples animações. Este formulário irá funcionar em pleno no Google Chome e no Safari, tendo também a possibilidade algumas simples animações. Este formulário irá funcionar em pleno no Google Chome e no Safari, tendo também a possibilidade de renderizar corretamente em Mozilla Firefox, Opera e Internet Explorer. Curioso? Continue a ler!

(2)

1. HTML

O primeiro passo é criar o layout do nosso formulário de contato, e isso significa utilizar HTML, tirando partido das suas funcionalidades. Crie um ficheiro HTML e insira o seguinte código para criar os campos do formulário, as suas designações e o bo tão de env io do me smo :

form action="#">

<h1>Contate-nos já!</h1> <fieldset id="user-details">

<input type="text" name="name" value="" /> <label for="email">Email:</label>

<input type="email" name="email" value="" /> <label for="telefone">Telefone:</label>

<input type="text" name="phone" value="" /> <label for="website">Website:</label>

<label for="mensagem">Mensagem:</label>

</form>

Neste momento o nosso formulário de co ntato está com o seguinte aspeto:

A pe nas n ec ess ita d o CSS3 p ar a fic ar c om um e stil o a tra tiv o e qu e se ade qu e ao seu web site , o qu e se rá fe ito no seg uin te p asso . Na seção <head> do seu documento, insira o seguinte código para fazer a ligação ao futuro ficheiro CSS e utilizar um tipo de letra do Google Fonts:

2. CSS

Como referimos, apenas iremos utilizar CSS3 e HTML5 para a criação deste formulário, e sendo assim resta-nos criar um ficheiro CSS e introduzir as regras de estilização para dar o look arrojado ao nosso formulário. Crie um ficheiro CSS com o nome style.css e insira o seguinte código para estilizar o corpo do formulário de co ntato:

* { margin: 0px; padding: 0px; } body { margin: 0 auto; background: #f5f5f5; background: #f5f5f5; color: #555;

(3)

font-family: 'Yanone Kaffeesatz', arial, sans-serif; }

De seguida introduza o seguinte código para estilizar os cabeçalhos e o título de cada um do s campos: h1 { color: #555; margin: 0 0 20px 0; } label { font-size: 20px; color: #666; }

Com o seguinte código iremos estilizar o c orpo do formulário, sendo este o núcleo base da estilização: form { float: left; border: 1px solid #ddd; padding: 30px 40px 20px 40px; margin: 75px 0 0 0; width: 715px; background: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;

background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFFFFF)); background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);

-webkit-box-shadow:0px 0 50px #ccc; -moz-box-shadow:0px 0 50px #ccc; box-shadow:0px 0 50px #ccc; }

Neste momento o nosso formulário está com o seguinte aspeto:

Como poderá verificar, falta introduzir algumas regras de estilização que vão definir espaços entre os elementos, limites e ordenar de forma geral o nosso formulário. Para isso é necessário introduzir mais algum código CSS no nosso ficheiro:

textarea { width: 390px; height: 175px; } input:hover, textarea:hover { background: #eee; } input.submit { width: 150px; color: #eee; text-transform: uppercase; margin-top: 10px; background-color: #18a5cc; border: none;

(4)

-webkit-transition: -webkit-box-shadow 0.3s linear;

-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8)); background: -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc);

} input.submit:hover { -webkit-box-shadow: 0px 0px 20px #555; -moz-box-shadow: 0px 0px 20px #aaa; box-shadow: 0px 0px 20px #555; cursor: pointer; }

Neste momento o nosso formulário de co ntato está pronto a ser utilizado e apresentado aos seus v isitantes!

A uti liza çã o de téc nic as CSS em det rim ent o da uti liza çã o de ima gen s e Jav asc rip t é ex tre mam ent e v ant ajo sa, po ten ci ado a v elo ci dad e de ca rr ega me nto do seu web site , dim inu ind o o trá fego uti liza d o. A lém diss o, atr av és da uti liza çã o de CSS é po ssív el poupar a utilização de código HTML extra, melhorar a ac essibilidade do seu website, reduzir o tempo utilizado na programação do seu website e co nsequentemente reduzir os custos do mesmo.

Os custos podem estar relacionados co m o tempo que poupa, tendo assim mais tempo para desenvolver o utros projetos, ou caso contrate alguém para o fazer, o tempo dispendido pelo profissional irá ser menor sendo assim a fatura final um pouco menos dispendiosa. Por fim destacamos a flexibilidade que é dada ao design com a utilização do CSS, melhorando inclusivamente podendo c riar uma v ersão de impressão que seja mais adequada e fácil para os seus visitantes.

(5)

Como criar um formulário de contato com CSS3

Artigos Recomendados

3 Métodos para c riar colunas de largura igual com CSS Programação CSS para iniciantes (Parte I)

15 Selectores CSS que nunca dever á esquecer! Como criar o seu próprio ícone RSS Feed com CSS3 Melhore a utilização de HTML5 e CSS3 co m Modernizr

You are subscribed to email updates fromTemplates para Blogger e Joomla To stop receiving these emails, you may unsubscribe now .

Email delivery pow ered by Google