Criar um Minimal Página Única Portfolio Com HTML5 e CSS3

Tutorial: Criar um Minimal Página Única Portfolio Com HTML5/CSS3

Por: David Martin

02 de fevereiro de 2012

Todas as mensagens , HTML , Tutoriais

15 Comentários

Este tutorial é a segunda parcela de como criar uma carteira única página mínima usando HTML5 e CSS3, dar uma olhada em uma parte

onde eu inicialmente projetou a página portfolio conceito único . Neste tutorial eu vou levá-lo através da compilação básica de front-end e

os recursos que eu usei para construir rapidamente a página.

O Projeto

http://designwoop.com/2011/08/tutorial-create-a-minimal-single-page-portfolio-design-in-photoshop/

http://designwoop.com/2012/02/tutorial-create-a-minimal-single-page-portfolio-with-html5css3/#comments

http://designwoop.com/category/tutorials/

http://designwoop.com/category/html/

http://designwoop.com/category/general/

http://designwoop.com/author/admin/

Recursos Utilizados

Titillium Texto - Usando @ font-face para a rubrica tipografia.

Produtor Form - Usado para demonstração forma básica.

Apple iOS Textura de linho - Usado para a textura de fundo.

Jribbble - Um plugin jQuery para puxar alguns tiros Dribbble.

HTML5 Clichê - Um quadro HTML5 para construir o nosso projeto em.

960 Grid System - Um framework CSS para fornecer de pixel perfeito, desde a concepção ao código.

Básico HTML5 layout

Nossa seção de layout básico começa com o doctype HTML5 e as coisas habituais, como as tags de título / 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 página. Eu mantive estes separada para fins de demonstração. Eu finalmente usar o

atributo forma HTML5 Autocorrect na área de texto da mensagem, este é novamente útil para usuários móveis 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 = conteúdo "description" = " David Martin - Web Design Tunbridge Wells ">

<meta name="author" content="David Martinwebadelic">

<meta name="viewport" content="width=device-width,initial-scale=1">

<ligação rel = "stylesheet" href = "css/grid/960_12_col.css">

<link rel="stylesheet" href="css/style.css">

</ head>

<body>

[/ Php]

Cabeçalho

O conceito de página é bastante simples assim semanticamente dividindo as seções até é fácil. Eu uso elementos HTML5, como <header> a

marcação do bloco de introdução como esta é a introdução à seção e <hrgroup> para marcar o texto de introdução para a seção atual.

http://960.gs/

http://html5boilerplate.com/

http://lab.tylergaw.com/jribbble/

http://www.premiumpixels.com/freebies/apple-ios-linen-texture/

http://dev7studios.com/portfolio/form-producer/

http://www.fontsquirrel.com/fonts/TitilliumText

[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]

Corpo

Eu grupo o conteúdo do corpo da página 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 também tanto o ninho colunas esquerda e direita usando o elemento <article>. Eu usei o elemento <article> para marcar as

áreas de conteúdo esquerdo e direito como duas peças de conteúdo dentro do elemento principal <section>.

Ao construir a forma que você pode ver que eu era capaz de usar alguns novos elementos de formulário HTML5 para melhorar a

funcionalidade formulário. Aviso para as entradas de texto que eu uso o atributo de espaço reservado, este exibe o texto no campo até que o

campo está focada.

A útil atributo forma HTML5 é a capitalização automática, isto é útil para usuários móveis que podem não querem que seus telefones para

adicionar letras maiúsculas para seus campos de e-mail.

Eu finalmente usou o HTML5 atributo forma de AutoCorreção no textarea mensagem para ajudar os usuários móveis que podem ter dedos

desajeitados ;).

Há mais elementos de formulário HTML5 você pode adicionar a esta forma, mas por enquanto isso é simplesmente uma demonstração. Eu

recomendaria também usando o atributo necessário para melhorar a sua validação de formulário. Tenha um jogo ao redor e divirta-se!

A alimentação Dribbble tiro é puxado usando o plugin jQuery, por enquanto eu simplesmente adicionar <ul id="feed"> </ ul> para a página,

este é o lugar onde a alimentação será puxado dentro Existem algumas opções de configuração que você vai necessidade de alterar no

plugin, você pode ler sobre isso aqui , ou simplesmente ver a demonstração.

[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 possuía. 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" />

https://github.com/tylergaw/jribbble/blob/master/README.md

<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 estão sendo alimentadas pelo meu <a

href="http://dribbble.com/webadelic" rel="nofollow"> alimentação 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]

Rodapé

Posso mais uma vez usar mais elementos do HTML5 para dividir semanticamente a seção de rodapé, eu primeiro embrulhar todo o rodapé

com o atributo <rodapé>.

O atributo <rodapé> pode ser utilizado no final de documentos e secções e tipicamente são utilizados para fornecer a informação do autor ou

outro texto variado.

Dentro do atributo <rodapé> eu dividir a links de esquerda e direita em duas seções separadas usando <section>, isso me permite separar o

agrupamento de conteúdo de maneira mais semântico.

[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:[email protected]" rel="nofollow"> [email protected] </ a> </ p>

</ Section>

</ Footer>

</ Div> <- fim do # container ->

</ Body>

</ html>

[/ Php]

Usando CSS

Agora nós criamos o layout básico HTML5, nós estamos prontos para adicionar o CSS. Aqui vou orientá-lo através de alguns conceitos

básicos do CSS eu usei para codificar o design. Para ver o CSS completo que eu usei para conseguir o layout exato ver a demonstração e

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 código

fonte que você vai ver as minhas referências para as colunas de grade no código, uma boa escrever sobre usando o 960 grade está

disponível a partir de seis revisões. Se você gostaria de explorar o código CSS melhor, é tudo disponível na demo.

Antes de adicionar o CSS:

http://sixrevisions.com/web_design/the-960-grid-system-made-easy/

http://designwoop.com/labs/portfolio/

Cabeçalho

Em primeiro lugar eu estou definindo a textura de fundo para o baixado e modificado Apple iOS Textura de linho . Em seguida eu ponho as

fontes do corpo, quero que as fontes para mostrar como Helvetica Neue, se possível, mas se essa fonte não está disponível vou reverter

para ou Helvetica ou Arial, respectivamente.

[Php]

body {

margin: 0;

background-image: url (.. / img / bg.png);

http://www.premiumpixels.com/freebies/apple-ios-linen-texture/

http://designwoop.com/uploads/2012/02/nocss.png

fonte: 11px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;

line-height: 1.231;

}

[/ php]

Título Fontes

Como foi dito que eu queria usar texto Titillium nas fontes que dirigem, como a fonte está disponível em vários formatos diferentes e é font-

face compatível posso usar @ font-face. Eu baixar as fontes e colocá-los em uma pasta no diretório 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';





url ('../fonts/TitilliumText22L003-webfont.svg # TitilliumText22LRegular') formato ('svg');


font-style: normal;

}

@ Font-face {

font-family: 'TitilliumText22LBold';





url ('../fonts/TitilliumText22L005-webfont.svg # TitilliumText22LBold') formato ('svg');


font-style: normal;

}

@ Font-face {

font-family: 'TitilliumText22LXBold';





url ('../fonts/TitilliumText22L006-webfont.svg # TitilliumText22LXBold') formato ('svg');


font-style: normal;

}

[/ php]

Forma

Denominando a forma que me permite usar alguns efeitos CSS3 agradáveis para corresponder-se com o projeto sem ter que usar imagens.

Eu uso o seguinte CSS3 para conseguir um efeito recuado nas entradas de formulário, eu acho que esta é uma forma agradável e simples de

fazer as entradas de formulário. Eu alcançar o campo de texto recuado usando a técnica 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 CSS Formulário Completo

[Php] </ pre>

<pre id="line1"> / * Formulário de Contato * /

label {

margin: 0 0 10px 0;

display: block;


}

. 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);

}

. Botão {

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))

);

}

. Botão: hover {

opacity: 0.8;

}

. Botão: active {

opacity: 0.4;

}

[/ php]

A alimentação Dribbble

A alimentação tiro dribbble é denominado usando algum CSS simples para remover a lista de balas e para obter cada imagem para se sentar

ao lado do próximo corretamente. Veja abaixo:

[Php]

ul # {alimentação

do tipo list-style: none;

margin: 60px 0;

padding: 0;

}

# Alimentação li {

float: left;

margin: 45px 0 45px 0;

padding: 5px;

width: 200px;

height: 150px;

border: solid 1px # dedbdb;

background: # fff;

}

[/ php]

Rodapé

Para dar os ícones sociais um pouco efeito hover, podemos usar o atributo CSS3 opacidade. Quando um usuário 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]

Demonstração: Veja a demo - Página Única HTML5 Portfolio

Fonte - http://designwoop.com/2012/02/tutorial-create-a-minimal-single-page-portfolio-with-html5css3/

http://designwoop.com/2012/02/tutorial-create-a-minimal-single-page-portfolio-with-html5css3/

http://designwoop.com/labs/portfolio/

Documents

Criar um Minimal Página Única Portfolio Com HTML5 e CSS3