Blog do MX Cursos

Aprenda a criar página estilo OnePage com HTML5 e CSS3

Avaliar post

Uma estratégia interessante para quem tem pouco conteúdo, como em sites institucionais, é adoção da página no formato “One Page” ou “Landing page”.

Uma página no formato “One Page” consiste em que todo conteúdo que deveria estar alocado em outras páginas de um site estariam na mesma página, separadas só por seções.

Existem muitas formas de navegação como utilizar javascript para fazer animações e transição dessas páginas.

Mas podemos criar este mesmo efeito utilizando CSS3, criando animação com a propriedade transition e também usando a pseudo classe :target.

A pseudo classe :target consegue identificar link âncora da URL. Dessa forma, podemos aplicar o estilo aos elementos.

Estrutura da página Onepage

A estrutura dos arquivos e pastas seria esta:

  • css/
    • style.css
  • images/
    • background.jpg
  • index.html

Vamos criar nossa estrutura HTML, no arquivo index.html.

Explicando o código acima:

  • Na linha 6 e 7, é adicionado o normalize.css para padronizar os estilos das tags e o arquivo style.css, onde iremos estilizar a nossa página;
  • Na linha de 10 a 20, 21 a 31, 32 a 42. 43 a 53 contém a mesma estrutura, onde cada section representaria uma página, um id representado essa página e dentro dela uma article, para definir o espaço que ficará o conteúdo;
  • Na linha 54 a 64, definimos o header. Ele está no final da página, pois queremos deixar o item marcado quando for clicar no link. E para isso usaremos o seletor ~ (Elemento1 ~ Elemento2), que irá selecionar o Elemento2 precedido pelo Elemento1Um outro item importante na definição dos links de navegação é que passamos a referência da seção com ID que queremos mostrar. No link da home, no href, temos #home e assim sucessivamente. Definimos um id para cada li para deixar marcado o link correspondente à seção.

Agora vamos criar o arquivo style.css.

Explicação do código acima:

  • Na linha 1 a 3, definimos um background na tag body;
  • Na linha 4 a 11, definimos o estilo da tag header;
    • Uma largura de 20%;
    • Cor de fundo branco;
    • Posição absoluta;
    • Encostado à esquerda;
    • 5% afastado do topo;
    • z-index 5, para sobrepor aos outros elementos;
  • Na linha 12 a 14, centralizamos o título;
  • Na linha 15 a 19, configuramos a lista dentro da tag nav;
    • Removemos os bullets;
    • Definimos que a margem do topo e da base serão de 5px;
    • Zeramos o padding;
  • Na linha 20 a 29, configurações do Link na lista;
    • Mudamos o display para block para ocultar 100%;
    • Uma borda de 1px do estilo sólido;
    • Removemos a borda da esquerda e da direita;
    • Demos uma margin de 3px do topo e da base;
    • Demos um padding de 5px do topo e da base;
    • Removemos o underline;
  • Na linha 30 a 37, definimos o box que ficará o conteúdo;
    • Afastamos de 5% do topo;
    • Afastamos de 10px da direita;
    • Definimos a largura 70%;
    • Definimos a altura de 70%;
    • Definimos um background;
  • Na linha 38 a 41, configuramos o título h2, o tamanho e o padding;
  • Na linha 42 a 45, configuramos os parágrafos, o tamanho e o padding;
  • Na linha 46 a 55, definimos a classe .content, onde configuramos a animação do conteúdo;
    • Definimos a largura minima de 100%;
    • Definimos a Altura de 98%;
    • Posição será absoluta;
    • Definimos que margem à esquerda será – 101%;
    • Definimos transition (propriedade, tempo, e tipo de transição)
  • Na linha 56 a 58, definimos a pseudo classe :target, onde é coloca a margem a esquerda para 0 (zero) para criar o efeito voltando a posição normal;
  • Na linha 59 a 61, definimos id#home fique na sua posição normal. Assim, ao acessar o site, ela irá aparecer por padrão;
  • Na linha 62 a 68, definimos o elemento que ficará marcado ao clicar em um link. Nesse caso, será o link precedido (~) por item já selecionado usando a pseudo classe :target.

Você pode ver o efeito funcionando no link abaixo:

https://blog.mxcursos.com/exemplos/onepage

Para baixar o código, acesse o link abaixo:

https://github.com/davidchc/tutorial-criando-onepage-html5-css3

Espero que tenham gostado.

Um abraço e até a próxima.

David CHC

David CHC

Trabalha com desenvolvimento web há 10 anos, atuou como programador líder do MX Cursos por mais de 8 anos e hoje dedica-se exclusivamente à criação de cursos para a plataforma. Possui vasto conhecimento em PHP, Javascript, HTML5, CSS3, Gulp.js, GIT, MySQL

Your Header Sidebar area is currently empty. Hurry up and add some widgets.

Newsletter

Newsletter

Receba em seu e-mail conteúdos semanais sobre desenvolvimento, design, audiovisual e tecnlogia.

Inscrição realizada com sucesso!