Criando uma “One Page” usando HTML5 e CSS3

Uma “One Page” consiste em que todas as páginas de um site estariam na mesma página, estariam separadas só por seções. Existem umas formas de navegação e muitas vezes utilizando javascript para fazer animações que seria de transição dessas páginas.

Podemos fazer algumas animações usando CSS 3, trabalhando transition e a pseudo classe :target.

A pseudo classe :target, será definido pela URL.

Vamos olhar como será o layout (lembrando que não vamos focar em design e sim nas funcionalidades).

Criando uma “One Page” usando HTML5 e CSS3

Teremos então um arquivo chamado index.html, um arquivo chamado style.css, que estará dentro da pasta css. Vamos usar o normalize.css, que também estará na pasta css.

Vamos agora para a prática. Primeiro vamos definir o corpo do nosso HTML (Colocarei aqui o conteúdo, sem as tag html, head, body, pra forcamos no conteúdo em si).


        <section id="home" class="content">
            <div class="box">
                <h2>Home</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa,
                  vestibulum id pulvinar quis, pharetra vestibulum quam. Sed ornare malesuada arcu id pulvinar.
                  Ut vulputate est sed nisl mattis lacinia. Aliquam mollis mauris id dictum tempus. Donec a
                  imperdiet purus, sed iaculis lectus. Nunc ligula enim, feugiat in vulputate vitae,
                  viverra sit amet nibh. Pellentesque sit amet nulla vel dolor dapibus cursus.
                </p>
            </div>
        </section>
        <section id="company" class="content">
            <div class="box">
                <h2>Empresa</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa,
                  vestibulum id pulvinar quis, pharetra vestibulum quam. Sed ornare malesuada arcu id pulvinar.
                  Ut vulputate est sed nisl mattis lacinia. Aliquam mollis mauris id dictum tempus. Donec a
                  imperdiet purus, sed iaculis lectus. Nunc ligula enim, feugiat in vulputate vitae,
                  viverra sit amet nibh. Pellentesque sit amet nulla vel dolor dapibus cursus.
                </p>
            </div>
        </section>
        <section id="service" class="content">
            <div class="box">
                <h2>Serviços</h2>

                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa,
                  vestibulum id pulvinar quis, pharetra vestibulum quam. Sed ornare malesuada arcu id pulvinar.
                  Ut vulputate est sed nisl mattis lacinia. Aliquam mollis mauris id dictum tempus. Donec a
                  imperdiet purus, sed iaculis lectus. Nunc ligula enim, feugiat in vulputate vitae,
                  viverra sit amet nibh. Pellentesque sit amet nulla vel dolor dapibus cursus.
                </p>
            </div>
        </section>
        <section id="contact" class="content">
            <div class="box">
                <h2>Contato</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa,
                  vestibulum id pulvinar quis, pharetra vestibulum quam. Sed ornare malesuada arcu id pulvinar.
                  Ut vulputate est sed nisl mattis lacinia. Aliquam mollis mauris id dictum tempus. Donec a
                  imperdiet purus, sed iaculis lectus. Nunc ligula enim, feugiat in vulputate vitae,
                  viverra sit amet nibh. Pellentesque sit amet nulla vel dolor dapibus cursus.
                </p>
            </div>
        </section>

        <header>
            <h1>One Page CSS3</h1>
            <nav>
                <ul>
                    <li id="link-home"><a href="#home">Home</a></li>
                    <li id="link-company"><a href="#company">Empresa</a></li>
                    <li id="link-service"><a href="#service">Serviços</a></li>
                    <li id="link-contact"><a href="#contact">Contato</a></li>
                </ul>
            </nav>
        </header>

Veja que utilizamos a section para definir cada seção, como fosse uma página. Então, temos a section#home, section#company, section#service, section:contact. Cada conteúdo, que seria de uma página, estarão nessas seções.

Dentro de cada seção, defino uma div.box, que será responsável por delimitar o espaço do conteúdo.

Colocarei o trecho comentado de uma seção para ficar mais claro.

 <!--Abre a seção que representa uma página de contato-->
        <section id="contact" class="content">
            <!--Contêiner responsável por definir o espaço do conteúdo dessa seção-->
            <div class="box">
                <!--Título da Página-->
                <h2>Contato</h2>
                <!--Conteúdo da página-->
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa,
                  vestibulum id pulvinar quis, pharetra vestibulum quam. Sed ornare malesuada arcu id pulvinar.
                  Ut vulputate est sed nisl mattis lacinia. Aliquam mollis mauris id dictum tempus. Donec a
                  imperdiet purus, sed iaculis lectus. Nunc ligula enim, feugiat in vulputate vitae,
                  viverra sit amet nibh. Pellentesque sit amet nulla vel dolor dapibus cursus.
                </p>
            </div><!--fecha o Contêiner -->
        </section><!--Fecha a seção -->

Agora repare que o nossa tag header foi colocado no final da página. Isso será porque queremos deixar o item marcado quando for clicar no link. E para isso usaremos o seletor ~ (Elemento1 ~ Elemento2), que já utilizamos em tutoriais passados e que irá selecionar o Elemento2 precedido pelo Elemento1

Um 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, tem #home, e assim sucessivamente. E definimos um id para cada li, para deixar marcado o link correspondente a seção.

Agora vamos ao CSS: style.css

/**
 * Definimos uma imagem para o background
 **/
body{
    background: url(../images/body.jpg) no-repeat fixed center top;
}

/**
* Fazemos a configuraçoes da tag header
* Uma largura de 20%;
* cor de fundo branco
* posição absoluta
* Encostado a esquerda
* 5% afastado do topo
* z-index 5, para sobre os outros elementos
*/
header{
    width:20%;
    background:#fff;
    position: absolute;
    left:0;
    top:5%;
    z-index: 5;
}
/**
* Centraliza o titulo
*/
header h1{
    text-align: center;
}

/**
* Configura a lista dentro da tag nav
* Remover os bullets
* Definir que a margem do topo e da base serão de 5px
* E zera o Padding
*/
nav ul{
    list-style:none;
    margin:5px 0;
    padding:0;

}

/**
 * Configurações do Link na lista
 * Muda o display para block para ocultar 100%
 * Uma bordar de 1px do estilo sólido
 * Remove a borda da esquerda e da direita
 * Dá uma margin de 3px do topo e da base
 * Dá um padding de 5px do topo e da base
 * Remove o underline
**/
nav a{
    display:block;
    border:1px solid #e5e5e5;
    border-left:0;
    border-right:0;
    margin:3px 0;
    color:#333;
    padding:5px 0;
    text-decoration: none;
}

/**
 * Defini o box que ficará o conteúdo
 * Afasta de 5% do topo
 * afasta de 10px da direita
 * Define a largura 70%
 * Define a altura de 70%
 * Define um background
 */
.box{
    position:absolute;
    top:5%;
    right:10px;
    width:70%;
    height:70%;
    background:#fff;
}

/**
 * Define o títulos h2
**/
.box h2{
    font-size:20px;
    padding:10px;
}

/**
 * Define os parágrafos
**/
.box p{
    font-size:12px;
    padding:10px;
}

/**
 * Aqui definimos a classe .content, que vamos definir a animação
 * Definimos o largura minima de 100%
 * Altura de 98%
 * Posição será absoluta;
 * Definimos que margin-left será - 101%
 * Definimos
 * Definimos transition (propriedade, tempo, e tipo de transição)
 **/
.content{
    min-width: 100%;
    height: 98%;
    position: absolute;
    margin-left:-101%;
    -webkit-transition: margin-left .8s ease-in-out;
    -moz-transition: margin-left .8s ease-in-out;
    -o-transition: margin-left .8s ease-in-out;
    transition: margin-left .8s ease-in-out;
}

/**
* Aqui definimos a pseudo classe :target
* Colocamos margin-left:0, para efetuar o efeito,
* voltando para sua posição normal
*/
.content:target{
    margin-left:0;
}

/**
 * Definimos #home fique na sua posição normal
 * Dessa forma, ao acessar o site, ela irá aparecer
 */
#home{
    margin-left:0;
}

/**
 * Aqui definimos o elemento que ficará marcado
 * ao clicar em um link.
 * Aqui será o link, precedido (~)por item já selecionado,
 * usando a pseudo classe :target
 */
#home:target ~ header #link-home a,
#company:target ~ header #link-company a,
#service:target ~ header #link-service a,
#contact:target ~ header #link-contact a{
    background: #333;
    color: #fff;
}

Agora, vamos ver o resultado final: Clique Aqui

Espero que tenha ajudado e até a próxima.

2 thoughts on “Criando uma “One Page” usando HTML5 e CSS3

  1. É com muito orgulho que eu digo que você foi quem me ajudou logo quando comecei no desenvolvimento web. Seus tutoriais e vídeo aulas são excelentes, sua paciência então é melhor ainda.

    Valeu meu querido, sucesso para você!

    OBS: Ótimo tutorial, era o que eu buscava.

  2. Eu q fico feliz, de poder ter te ajudado de alguma forma no seu aprendizado, e vendo sua evolução, posso confessar q pra mim é muito gratificante. abrs

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *