Criar página portfolio HTML5/CSS3

Tutorial: Criar um Minimal Pgina nica Portfolio Com HTML5/CSS3
Por: David Martin
02 de fevereiro de 2012
Todas as mensagens , HTML , Tutoriais
15 Comentrios
Este tutorial a segunda parcela de como criar uma carteira nica pgina mnima usando HTML5 e CSS3, dar uma olhada em uma parte onde eu inicialmente projetoua pginaportfolioconceitonico . Neste tutorial eu vou lev-lo atravs da compilao bsica de front-end e os recursos que eu usei para construir rapidamente a pgina.
O Projeto
Recursos tili!a"os
TitilliumTexto - Usando @ font-face para a rubrica tipografia. ProdutorForm - Usado para demonstrao forma bsica. AppleiOS Texturade linho - Usado para a textura de fundo. Jribbble - Um plugin jQuery para puxar alguns tiros Dribbble. HTML5Clich - Um quadro HTML5 para construir o nosso projeto em. 960 Grid System- Um framework CSS para fornecer de pixel perfeito, desde a concepo ao cdigo.
#sico HTML5 la$out

Nossa seo de layout bsico comea com o doctype HTML5 e as coisas habituais, como as tags de ttulo / meta e os links para duas folhas de estilo CSS. Um deles o quadro 960 grade que me permite codificar rapidamente e facilmente configurar o site do meu projeto anterior, a outra folha de estilo onde eu coloco os estilos para a pgina. Eu mantive estes separada para fins de demonstrao. Eu finalmente usar o atributo forma HTML5 Autocorrect na rea de texto da mensagem, este novamente til para usurios mveis que podem ter dedos gordos ou desajeitados ;). [Php] <! Doctype html> <head> <meta charset="utf-8"> <title> David Martin - Um Web Designer & Developer -. Tunbridge Wells, Kent </ title> <meta name = contedo "description" = " David Martin - Web Design Tunbridge Wells "> <meta name="author" content="David Martinwebadelic"> <meta name="viewport" content="width=device-width,initial-scale=1"> <ligao rel = "stylesheet" href = "css/grid/960_12_col.css"> <link rel="stylesheet" href="css/style.css"> </ head> <body> [/ Php]
Ca%e&al'o
O conceito de pgina bastante simples assim semanticamente dividindo as sees at fcil. Eu uso elementos HTML5, como <header> a marcao do bloco de introduo como esta a introduo seo e <hrgroup> para marcar o texto de introduo para a seo atual.
[Php] <div id="header-line"> </ div> <div class="container_12"> <header> <div class="grid_3 push_1"> <img src="img/webadelic-logo.png" alt="Webadelic-Web Design Tunbridge Wells" border="0" width="140" height="94" /> </ Div> <hgroup class="grid_7 push_1 intro"> <h1> Ol! Meu nome David! </ H1> <h2> Um desenvolvedor web e designer da Tunbridge Wells, no Reino Unido. </ h2> <hgroup> </ Header> <div class="clear"> </ div> [/ Php]
Cor(o
Eu grupo o contedo do corpo da pgina usando os elementos HTML5 <section> e <article>. Eu uso o elemento <section> ao grupo pequeno 'Sobre' coluna esquerda e direita forma 'Contato'. Repare que eu tambm tanto o ninho colunas esquerda e direita usando o elemento <article>. Eu usei o elemento <article> para marcar as reas de contedo esquerdo e direito como duas peas de contedo dentro do elemento principal <section>. Ao construir a forma que voc pode ver que eu era capaz de usar alguns novos elementos de formulrio HTML5 para melhorar a funcionalidade formulrio. Aviso para as entradas de texto que eu uso o atributo de espao reservado, este exibe o texto no campo at que o campo est focada. A til atributo forma HTML5 a capitalizao automtica, isto til para usurios mveis que podem no querem que seus telefones para adicionar letras maisculas para seus campos de e-mail. Eu finalmente usou o HTML5 atributo forma de AutoCorreo no textarea mensagem para ajudar os usurios mveis que podem ter dedos desajeitados ;). H mais elementos de formulrio HTML5 voc pode adicionar a esta forma, mas por enquanto isso simplesmente uma demonstrao. Eu recomendaria tambm usando o atributo necessrio para melhorar a sua validao de formulrio. Tenha um jogo ao redor e divirta-se!
A alimentao Dribbble tiro puxado usando o plugin jQuery, por enquanto eu simplesmente adicionar <ul id="feed"> </ ul> para a pgina, este o lugar onde a alimentao ser puxado dentro Existem algumas opes de configurao que voc vai necessidade de alterar no plugin, voc pode ler sobreisso aqui , ou simplesmente ver a demonstrao. [Php] <div id="horizontal-line-full" class="push_1"> </ div> <div id="main" role="main" class="grid_10 push_1"> <section> <article class="grid_4 about"> <header> <h3> Sobre </ h3> </ Header> <p> Maurizzle tellivizzle NIBH Bling Bling, com certeza. Ghetto izzle Sheezy. Pellentesque yo rhoncus mamma possua. Gangster nizzle hac platea dictumst. </ P> <p> Maurizzle tellivizzle NIBH Bling Bling, com certeza. Ghetto izzle Sheezy. Pellentesque yo rhoncus mamma possua. Gangster nizzle hac platea dictumst. </ P> <p> Maurizzle tellivizzle NIBH Bling Bling, com certeza. Ghetto izzle Sheezy. Pellentesque yo rhoncus mamma possua. Gangster nizzle hac platea dictumst. </ P> </ Article> </ Section> <div class="grid_2 coluna"> </ div> <section> <article class="grid_4 contact"> <header> <h3> Contato </ h3> </ Header> <section class="contact-me"> <label for="name"> Nome </ label> <input type="text" name="name" id="name" placeholder="Your Name" autocapitalize="on" autocorrect="on" />
<label for="email"> e-mail </ label> <input type="email" name="email" id="email" placeholder="Your email" autocapitalize="off" autocorrect="on" /> <label for="website"> mensagem </ label> <textarea name="message" id="message" placeholder="Your message" autocorrect="on"> </ textarea> <button class="button" name="submit" id="submit"> Enviar </ button> </ Section> </ Form> </ Article> </ Section> <section> <article class="grid_10 projects"> <header> Projetos <h3> </ h3> </ Header> <p> Voc pode conferir alguns dos desenhos que eu estou trabalhando em que esto sendo alimentadas pelo meu <a href="http://dribbble.com/webadelic" rel="nofollow"> alimentao Dribbble </ a>, um dia, quando eu tiver algum tempo livre eu vou desenvolver este site um pouco mais para realmente mostrar alguns detalhes completos do projeto ... <em> Prometo </ em>. </ p> <ul id="feed"> </ ul> </ Article> </ Section> [/ Php]
Ro"a()
Posso mais uma vez usar mais elementos do HTML5 para dividir semanticamente a seo de rodap, eu primeiro embrulhar todo o rodap com o atributo <rodap>. O atributo <rodap> pode ser utilizado no final de documentos e seces e tipicamente so utilizados para fornecer a informao do autor ou outro texto variado. Dentro do atributo <rodap> eu dividir a links de esquerda e direita em duas sees separadas usando <section>, isso me permite separar o agrupamento de contedo de maneira mais semntico.
[Php] <footer class="grid_10 footer"> <section id="social-procrastination" class="grid_6"> <ul> <li id="twitter"> <a href="http://twitter.com/#!webadelic" rel="nofollow" title="David Martin (@webadelic) em Twitter"> <span> David Martin (@ webadelic) no Twitter </ span> </ a> </ li> <li id="gplus"> <a href = "https://plus.google.com/108725634593324907312/posts" rel = "nofollow "> <span> David Martin (@ webadelic) no Google Plus </ span> </ a> </ li> <li id="dribbble"> <a href = "rel http://dribbble.com/webadelic" = "nofollow"> <span> David Martin (@ webadelic) em Dribbble </ span> </ a> </ li> </ ul> </ Section> <section id="footer-email" class="grid_2 push_2"> <p> href="mailto:david@webadelic.co.uk" rel="nofollow"> david@webadelic.co.uk </ a> </ p> </ Section> </ Footer> </ Div> <- fim do # container -> </ Body> </ html>
[/ Php]
san"o CSS
Agora ns criamos o layout bsico HTML5, ns estamos prontos para adicionar o CSS. Aqui vou orient-lo atravs de algunsconceitosbsicos do CSSeu usei para codificar o design. Para ver o CSS completo que eu usei para conseguir o layout exato ver a demonstraoe ter um snoop ao redor. Eu uso a grade 960.gs com alguns estilos personalizados, a fim de coincidir com o site com o design, se voc der uma olhada no cdigo fonte que voc vai ver as minhas referncias para as colunas de grade no cdigo, uma boa escrever sobre usandoo 960 grade est disponvel a partir de seis revises. Se voc gostaria de explorar o cdigo CSS melhor, tudo disponvel na demo. Antes de adicionar o CSS:
Ca%e&al'o
Em primeiro lugar eu estou definindo a textura de fundo para o baixado e modificado AppleiOS Texturade linho . Em seguida eu ponho as fontes do corpo, quero que as fontes para mostrar como Helvetica Neue, se possvel, mas se essa fonte no est disponvel vou reverter para ou Helvetica ou Arial, respectivamente. [Php] body { margin: 0; background-image: url (.. / img / bg.png);
fonte: 11px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.231; } [/ php]
T*tulo +ontes
Como foi dito que eu queria usar texto Titillium nas fontes que dirigem, como a fonte est disponvel em vrios formatos diferentes e fontface compatvel posso usar @ font-face. Eu baixar as fontes e coloc-los em uma pasta no diretrio do site e cham-los usando o abaixo @ code font-face: [Php] </ pre> <pre id="line1"> h1 {font: 35px/15px 'TitilliumText22LXBold', Arial, sans-serif; letter-spacing: 2px;} h2 {font: 20px/15px 'TitilliumText22LThin', Arial, sans-serif; letter-spacing: 1px; color: # 8a8989;} h3 {font: 28px/15px 'TitilliumText22LThin', Arial, sans-serif; letter-spacing: 1px;} p {color: # 8a8989;} @ Font-face { font-family: 'TitilliumText22LThin'; src: url ('../fonts/TitilliumText22L001-webfont.eot'); src: url ('? ../fonts/TitilliumText22L001-webfont.eot # iefix' ) formato ('-OpenType incorporado'), url ('../fonts/TitilliumText22L001-webfont.woff') formato ('woff'), url ('../fonts/TitilliumText22L001-webfont.ttf') formato (' truetype '), url ('../fonts/TitilliumText22L001-webfont.svg # TitilliumText22LThin') formato ('svg'); font-weight: normal; font-style: normal; } @ Font-face { font-family: 'TitilliumText22LRegular'; src: url ('../fonts/TitilliumText22L003-webfont.eot'); src: url ('? ../fonts/TitilliumText22L003-webfont.eot # iefix' ) formato ('-OpenType incorporado'), url ('../fonts/TitilliumText22L003-webfont.woff') formato ('woff'),
url ('../fonts/TitilliumText22L003-webfont.ttf') formato (' truetype '), url ('../fonts/TitilliumText22L003-webfont.svg # TitilliumText22LRegular') formato ('svg'); font-weight: normal; font-style: normal; } @ Font-face { font-family: 'TitilliumText22LBold'; src: url ('../fonts/TitilliumText22L005-webfont.eot'); src: url ('? ../fonts/TitilliumText22L005-webfont.eot # iefix' ) formato ('-OpenType incorporado'), url ('../fonts/TitilliumText22L005-webfont.woff') formato ('woff'), url ('../fonts/TitilliumText22L005-webfont.ttf') formato (' truetype '), url ('../fonts/TitilliumText22L005-webfont.svg # TitilliumText22LBold') formato ('svg'); font-weight: normal; font-style: normal; } @ Font-face { font-family: 'TitilliumText22LXBold'; src: url ('../fonts/TitilliumText22L006-webfont.eot'); src: url ('? ../fonts/TitilliumText22L006-webfont.eot # iefix' ) formato ('-OpenType incorporado'), url ('../fonts/TitilliumText22L006-webfont.woff') formato ('woff'), url ('../fonts/TitilliumText22L006-webfont.ttf') formato (' truetype '), url ('../fonts/TitilliumText22L006-webfont.svg # TitilliumText22LXBold') formato ('svg'); font-weight: normal; font-style: normal; } [/ php]
+orma
Denominando a forma que me permite usar alguns efeitos CSS3 agradveis para corresponder-se com o projeto sem ter que usar imagens.
Eu uso o seguinte CSS3 para conseguir um efeito recuado nas entradas de formulrio, eu acho que esta uma forma agradvel e simples de fazer as entradas de formulrio. Eu alcanar o campo de texto recuado usando a tcnica de sombra caixa CSS e usando um 1px-line preto: 0-0 1px 0px que tem sua opacidade definida para 0,1:. Rgba (0,0,0,0.1) Veja abaixo : [Php] -moz-box-shadow: 0-0 1px 0px rgba (0,0,0,0.1); -webkit-box-shadow: 0-0 1px 0px rgba (0,0,0,0.1); caixa -sombra: 0-0 1px 0px rgba (0,0,0,0.1); [/ php] O CSSFormulrioCompleto [Php] </ pre> <pre id="line1"> / * Formulrio de Contato * / label { margin: 0 0 10px 0; display: block; font-weight: normal; } . Erro {color: red;} # Form_producer input [type = "text"], contacte-me input [type = "email"] {. float: left; clear: both; margin: 0 0 15px 0; padding: 3px 6px; width: 300px; height: 24px; border: none; color: # 8a8989; background: # f9f9f9; -moz-box-shadow: 0-0 1px 0px rgba (0,0,0,0.1);
-webkit-box-shadow: 0-1px 0 rgba 0px (0,0,0,0.1); box-shadow: 0-0 1px 0px rgba (0,0,0,0.1); } # Form_producer textarea { float: left; clear: both; margin: 0 0 15px 0; padding: 3px; width: 305px; height: 90px; border: none; color: # 8a8989; background: # f9f9f9; -moz-box- sombra: 0-0 1px 0px rgba (0,0,0,0.1); -webkit-box-shadow: 0-0 1px 0px rgba (0,0,0,0.1); box-shadow: 0-0 1px 0px rgba (0,0,0,0.1); } . Boto { float: left; clear: both; background-color: # ebe9e9; border: solid 1px # ebe9e9; width: 140px; height: 30px; text-transform: uppercase; font-size: 0.9em; letter-spacing: 1px; background-image: linear de gradiente (superior, rgb (241241241) 50%, rgb (235233233) 50%);
background-image:-o-linear de gradiente (superior, rgb (241241241) 50%, rgb (235233233 ) 50%); background-image:-moz-linear-gradient (top, rgb (241241241) 50%, rgb (235233233) 50%); background-image:-webkit-linear de gradiente (superior, rgb (241241241) 50%, rgb (235233233) 50%); imagem de fundo:-ms-linear de gradiente (topo, rgb (241241241) 50%, rgb (235233233) 50%); background-image:-webkit-gradient ( linear, superior esquerdo, inferior esquerdo, cor-stop (0,5, rgb (241241241)), cor-stop (0,5, rgb (235233233)) ); } . Boto: hover { opacity: 0.8; } . Boto: active { opacity: 0.4; } [/ php]
, alimenta&-o .ri%%%le
A alimentao tiro dribbble denominado usando algum CSS simples para remover a lista de balas e para obter cada imagem para se sentar ao lado do prximo corretamente. Veja abaixo: [Php] ul # {alimentao do tipo list-style: none; margin: 60px 0; padding: 0; }
# Alimentao li { float: left; margin: 45px 0 45px 0; padding: 5px; width: 200px; height: 150px; border: solid 1px # dedbdb; background: # fff; } [/ php]
Ro"a()
Para dar os cones sociais um pouco efeito hover, podemos usar o atributo CSS3 opacidade. Quando um usurio passa o mouse sobre, a opacidade alterado para O.8. [Php] # O twitter a: hover, # gplus a: hover, # Dribbble a: hover { opacity: 0.8; } [/ php] Demonstrao:Veja a demo- PginanicaHTML5Portfolio
Fonte - http://designwoop.com/2012/02/tutorial-create-a-minimal-single-page-portfolio-with-html5css3/

Criar página portfolio HTML5/CSS3

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Criar página portfolio HTML5/CSS3

Caricato da

Copyright:

Formati disponibili

Tutorial: Criar um Minimal Pgina nica Portfolio Com HTML5/CSS3

Por: David Martin

Todas as mensagens , HTML , Tutoriais

#sico HTML5 la$out

Potrebbero piacerti anche