16/07/12

Gmail - Como criar um formulrio de contato com CSS3 - Escola Criatividade

Fbio Cabrero <fabiocabrero@gmail.com>

Como criar um formulrio de contato com CSS3 - Escola Criatividade

1 mensagem Templates para Blogger e Joomla <geral@escolacriatividade.com> Para: fabiocabrero@gmail.com 14 de junho de 2012 16:11

Como criar um formulrio de contato com CSS3 - Escola Criatividade

Como criar um formulrio de contato com CSS3
Posted: 1 4 Jun 201 2 09:02 AM PDT CSS a abrev iatura de Cascade Sty ling Sheet, que significa Folha de Estilo em Cascata, e a linguagem utilizada para controlar a apresentao de elementos em documentos HTML. A apresentao destes especificada por uma srie de regras que podem ser atribudas em linha atrav s dos atributos do elemento sty le ou atrav s de regras includas dentro das tags <sty le> </sty le> na seco head dos documentos HTML, ou atrav s de folhas de estilo ex ternas (V er Tutorial: Aprender o bsico sobre CSS ). Neste artigo v amos-lhe demonstrar como criar um fantstico formulrio de contato com HTML e CSS3 para surpreender os seus v isitantes com um look arrojado e de qualidade, fornecendo uma v ia para os seus leitores e v isitantes o contatarem rapidamente. Este artigo baseado no formulario de contato apresentado pelos colegas da V oosh Themes, tendo sido adaptado com algumas alteraes especialmente para si. Se um curioso pela linguagem CSS, recomendamos a leitura dos seguintes artigos: Programao Programao Programao Programao Programao Programao Programao Programao Programao Programao Programao Programao CSS para iniciantes (Parte I) CSS para iniciantes (Parte II) CSS para iniciantes (Parte III) CSS para iniciantes (Parte IV ) CSS para iniciantes (Parte V ) CSS para iniciantes (Parte V I) CSS para iniciantes (Parte V II) CSS para iniciantes (Parte V III) CSS para iniciantes (Parte IX) CSS para iniciantes (Parte X) CSS para iniciantes (Parte XI) CSS para iniciantes (Parte XII)

A criao de formulrios de contato bonitos e atraentes normalmente significa a utilizao de imagens e alguns truques Jav ascript / jQuery , mas neste tutorial v amos criar um fantstico fomulrio de contato utilizando apenas HTML5 e CSS3. Iremos utilizar um conjunto diferentes tcnicas CSS para estilizar o formulrio, desde gradientes, sombras, cantos arredondados e algumas simples animaes. Este formulrio ir funcionar em pleno no Google Chome e no Safari, tendo tambm a possibilidade de renderizar corretamente em Mozilla Firefox , Opera e Internet Ex plorer. Curioso? Continue a ler!

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

1/5

16/07/12

Gmail - Como criar um formulrio de contato com CSS3 - Escola Criatividade

1. HTML
O primeiro passo criar o lay out do nosso formulrio de contato, e isso significa utilizar HTML, tirando partido das suas funcionalidades. Crie um ficheiro HTML e insira o seguinte cdigo para criar os campos do formulrio, as suas designaes e o boto de env io do mesmo: f o r ma c t i o n = " # " > < h 1 > C o n t a t e n o sj ! < / h 1 > < f i e l d s e ti d = " u s e r d e t a i l s " > < l a b e lf o r = " n o m e " > N o m e : < / l a b e l > < i n p u tt y p e = " t e x t "n a m e = " n a m e "v a l u e = " "/ > < l a b e lf o r = " e m a i l " > E m a i l : < / l a b e l > < i n p u tt y p e = " e m a i l "n a m e = " e m a i l "v a l u e = " " / > < l a b e lf o r = " t e l e f o n e " > T e l e f o n e : < / l a b e l > < i n p u tt y p e = " t e x t "n a m e = " p h o n e "v a l u e = " " / > < l a b e lf o r = " w e b s i t e " > W e b s i t e : < / l a b e l > < i n p u tt y p e = " u r l "n a m e = " w e b s i t e "v a l u e = " " / > < / f i e l d s e t > < f i e l d s e ti d = " u s e r m e s s a g e " > < l a b e lf o r = " m e n s a g e m " > M e n s a g e m : < / l a b e l > < t e x t a r e an a m e = " m e s s a g e "r o w s = " 0 "c o l s = " 0 " > < / t e x t a r e a > < i n p u tt y p e = " s u b m i t "v a l u e = " E n v i a rM e n s a g e m "n a m e = " s u b m i t "c l a s s = " s u b m i t "/ > < / f i e l d s e t > < / f o r m > Neste momento o nosso formulrio de contato est com o seguinte aspeto:

Apenas necessita do CSS3 para ficar com um estilo atrativ o e que se adeque ao seu website, o que ser feito no seguinte passo. Na seo <head> do seu documento, insira o seguinte cdigo para fazer a ligao ao futuro ficheiro CSS e utilizar um tipo de letra do Google Fonts: < l i n kh r e f = ' h t t p : / / f o n t s . g o o g l e a p i s . c o m / c s s ? f a m i l y = Y a n o n e + K a f f e e s a t z 'r e l = ' s t y l e s h e e t ' t y p e = ' t e x t / c s s '/ > < l i n kt y p e = " t e x t / c s s "r e l = " s t y l e s h e e t "h r e f = " s t y l e . c s s "/ >

2. CSS
Como referimos, apenas iremos utilizar CSS3 e HTML5 para a criao deste formulrio, e sendo assim resta-nos criar um ficheiro CSS e introduzir as regras de estilizao para dar o look arrojado ao nosso formulrio. Crie um ficheiro CSS com o nome sty le.css e insira o seguinte cdigo para estilizar o corpo do formulrio de contato: *{m a r g i n :0 p x ;p a d d i n g :0 p x ;} b o d y{ m a r g i n :0a u t o ; b a c k g r o u n d :# f 5 f 5 f 5 ; b a c k g r o u n d :# f 5 f 5 f 5 ; c o l o r :# 5 5 5 ; w i d t h :8 0 0 p x ;

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 formulrio de contato com CSS3 - Escola Criatividade w i d t h :8 0 0 p x ;

f o n t f a m i l y :' Y a n o n eK a f f e e s a t z ' ,a r i a l ,s a n s s e r i f ; } De seguida introduza o seguinte cdigo para estilizar os cabealhos e o ttulo de cada um dos campos: h 1{ c o l o r :# 5 5 5 ; m a r g i n :002 0 p x0 ; } l a b e l{ f o n t s i z e :2 0 p x ; c o l o r :# 6 6 6 ; } Com o seguinte cdigo iremos estilizar o corpo do formulrio, sendo este o ncleo base da estilizao: f o r m{ f l o a t :l e f t ; b o r d e r :1 p xs o l i d# d d d ; p a d d i n g :3 0 p x4 0 p x2 0 p x4 0 p x ; m a r g i n :7 5 p x000 ; w i d t h :7 1 5 p x ; b a c k g r o u n d :# f f f ; w e b k i t b o r d e r r a d i u s :1 0 p x ; m o z b o r d e r r a d i u s :1 0 p x ; b o r d e r r a d i u s :1 0 p x ; b a c k g r o u n d :w e b k i t g r a d i e n t ( l i n e a r ,0 %0 % ,0 %4 0 % ,f r o m ( # E E E ) ,t o ( # F F F F F F ) ) ; b a c k g r o u n d :m o z l i n e a r g r a d i e n t ( 0 %4 0 %9 0 d e g , # F F F ,# E E E ) ; w e b k i t b o x s h a d o w : 0 p x05 0 p x# c c c ; m o z b o x s h a d o w : 0 p x05 0 p x# c c c ; b o x s h a d o w : 0 p x05 0 p x# c c c ; } Neste momento o nosso formulrio est com o seguinte aspeto:

Como poder v erificar, falta introduzir algumas regras de estilizao que v o definir espaos entre os elementos, limites e ordenar de forma geral o nosso formulrio. Para isso necessrio introduzir mais algum cdigo CSS no nosso ficheiro: t e x t a r e a{ w i d t h :3 9 0 p x ; h e i g h t :1 7 5 p x ; } i n p u t : h o v e r ,t e x t a r e a : h o v e r{ b a c k g r o u n d :# e e e ; } i n p u t . s u b m i t{ w i d t h :1 5 0 p x ; c o l o r :# e e e ; t e x t t r a n s f o r m :u p p e r c a s e ; m a r g i n t o p :1 0 p x ; b a c k g r o u n d c o l o r :# 1 8 a 5 c c ; b o r d e r :n o n e ;

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 formulrio de contato com CSS3 - Escola Criatividade

w e b k i t t r a n s i t i o n :w e b k i t b o x s h a d o w0 . 3 sl i n e a r ;

m o z b o r d e r r a d i u s :4 p x ; w e b k i t b o r d e r r a d i u s :4 p x ; b o r d e r r a d i u s :4 p x ; b a c k g r o u n d :w e b k i t g r a d i e n t ( l i n e a r ,0 %0 % ,0 %1 0 0 % ,f r o m ( # 1 8 a 5 c c ) ,t o ( # 0 a 8 5 a 8 ) ) ; b a c k g r o u n d :m o z l i n e a r g r a d i e n t ( 2 5 %7 5 %9 0 d e g , # 0 a 8 5 a 8 ,# 1 8 a 5 c c ) ; } i n p u t . s u b m i t : h o v e r{ w e b k i t b o x s h a d o w :0 p x0 p x2 0 p x# 5 5 5 ; m o z b o x s h a d o w :0 p x0 p x2 0 p x# a a a ; b o x s h a d o w :0 p x0 p x2 0 p x# 5 5 5 ; c u r s o r : p o i n t e r ; } Neste momento o nosso formulrio de contato est pronto a ser utilizado e apresentado aos seus v isitantes!

A utilizao de tcnicas CSS em detrimento da utilizao de imagens e Jav ascript ex tremamente v antajosa, potenciado a v elocidade de carregamento do seu website, diminuindo o trfego utilizad o. Alm disso, atrav s da utilizao de CSS possv el poupar a utilizao de cdigo HTML ex tra, melhorar a acessibilidade do seu website, reduzir o tempo utilizado na programao do seu website e consequentemente reduzir os custos do mesmo. Os custos podem estar relacionados com o tempo que poupa, tendo assim mais tempo para desenv olv er outros projetos, ou caso contrate algum para o fazer, o tempo dispendido pelo profissional ir ser menor sendo assim a fatura final um pouco menos dispendiosa. Por fim destacamos a flex ibilidade que dada ao design com a utilizao do CSS, melhorando inclusiv amente podendo criar uma v erso de impresso que seja mais adequada e fcil para os seus v isitantes. Abrao!

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

Como criar um formulrio

4/5

16/07/12
de contato com CSS3

Gmail - Como criar um formulrio de contato com CSS3 - Escola Criatividade

Como criar um formulrio

Artigos Recomendados
3 Mtodos para criar colunas de largura igual com CSS Programao CSS para iniciantes (Parte I) 1 5 Selectores CSS que nunca dev er esquecer! Como criar o seu prprio cone RSS Feed com CSS3 Melhore a utilizao de HTML5 e CSS3 com Modernizr

You are subscribed to email updates from Templates para Blogger e Joomla To stop receiving these emails, you may unsubscribe now . Google Inc., 20 West Kinzie, Chicago IL USA 60610

Email delivery pow ered by Google

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

5/5