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

16/07/12

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

Fábio Cabrero

Como criar um formulário de contato com CSS3 - Escola Criatividade 1 mensagem Templates para Blogger e Joomla Para: [email protected] [email protected]

14 de junho de 2012 16:11

Como criar um um fo rmu rmulár lário io de contato com CSS3 - Escola Esco la Criatividade Criatividade

Como criar um formulário de contato com CSS3 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 apresentação de elementos em doc umentos HTML. HTML. A apresentação destes é especificada especificada por uma série série de regras que podem ser atribuídas em linha linha através dos atributos do elemento style ou atrav és de r egras incluídas incluídas dentro das tags na secção head dos do cumentos HTML, HTML, ou através de folhas de estilo externas (Ver Tutorial Tutorial:: Aprender o básico sobre CS CSS S ). Neste artigo vamos-lhe demonstrar como criar um fantástico formulário de contato com HTML e CSS3 para surpreender os seus  v isit ant es c om um lo ok a rr oj ado e de q ual ida de , fo rne ce ndo um a v ia p ara os seu s lei to re s e v isit ante s o co nta tar em ra pid am ent e. Este Este artigo é baseado no formulario formulario de contato apresentado pelos co legas da Voosh Themes, tendo sido adaptado com algumas 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 II) Programação CSS para iniciantes (Parte III) Programação CSS para iniciantes (Parte IV) Programação CSS para iniciantes (Parte V) Programação CSS para iniciantes (Parte VI) Programação CSS para iniciantes (Parte VII) Programação CSS para iniciantes (Parte VIII) Programaç ão CSS para iniciantes (Parte I X) Programaç ão CSS para iniciantes (Parte X) Programaç ão CSS para iniciantes (Parte XI) Programação CSS para iniciantes (Parte XII)  A cr iaç ão de for mul ári os de co nta to bo nito s e atr aen tes no rm alm ent e sign ific a a uti liza çã o de ima gen s e alg uns tru qu es Javascript / jQuery, mas neste tutorial vamos criar um fantástico fomulário de contato utilizando apenas HTML5 e CSS3. Iremos utilizar um conjunto diferentes técnicas CSS CSS para estilizar estilizar o formu formu lário, desde gradientes, sombr as, cantos arredo ndados e 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!

https://mail.google.com/mail/u/0/?ui=2&ik=c1ec8fe931&view=pt&cat=Cursos https://mail.google.com/mail/u/0/?u i=2&ik=c1ec8fe931&view=pt&cat=Cursos EAD%2FEstudo Interne…

1/5

16/07/12

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

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="#"> Contate-nos já! Nome: Email:

Telefone:

Website:

Mensagem:

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 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; width: 800px;

https://mail.google.com/mail/u/0/?ui=2&ik=c1ec8fe931&view=pt&cat=Cursos EAD%2FEstudo Interne…

2/5

16/07/12

Gmail - Como criar um formulário de contato com CSS3 - Escola Criatividade 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;

https://mail.google.com/mail/u/0/?ui=2&ik=c1ec8fe931&view=pt&cat=Cursos EAD%2FEstudo Interne…

3/5

16/07/12

Gmail - Como criar um formulário de contato com CSS3 - Escola Criatividade -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.  A br aç o!

https://mail.google.com/mail/u/0/?ui=2&ik=c1ec8fe931&view=pt&cat=Cursos EAD%2FEstudo Interne…

4/5

16/07/12

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

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

Email delivery pow ered by Google

To stop receiving these emails, you may unsubscribe now . Google Inc., 20 West Kinzie, Chicago IL USA 60610

https://mail.google.com/mail/u/0/?ui=2&ik=c1ec8fe931&view=pt&cat=Cursos EAD%2FEstudo Interne…

5/5