7º exercício: Rodapé aparece por trás

Eu gosto muito deste efeito, e alguns podem dizer que isso não tem relação com parallax, mas estamos falando de profundidade, sem contar que, nunca vi site feio com esse efeito. Esse detalhe do rodapé aparecendo por trás do conteúdo é muito lindo.

Sem contar que, neste exercício nós fazemos o básico, mas, você pode adicionar outros efeitos que, somados com este e, com bom senso, fazem uma página web terminar com um estilo muito lindo e sutil.

O código fonte inicial deste exercício é o código fonte final do exercício número quatro e, não utilizamos JS neste exercício.

Vídeo:

Uma sugestão é que você altere o conteúdo do texto do conteúdo, e também pense em cores que combinem, uma para o background do conteúdo e outro para o background do rodapé.

Pensei em gray91 (E8E8E8) para o background do conteúdo e gray81 para o rodapé (363636) e o texto em si da cor branca, mas isso é apenas uma sugestão, então, sem mais delongas, vamos ao exercício número 7.

Antes de fechar o <body> precisamos criar um rodapé. O código fonte a seguir é a base de um rodapé.

<footer>
    <div>
        <p class="textorodape">RODAPÉ</p>
    </div>
</footer>

No CSS eu configuro a altura do meu <footer>, e para isso mais uma vez utilizarei vh como unidade de medida.

footer {
height: 15vh;
}

Repare bem no código HTML, nele vemos uma classe em nossa <p>, e o restante da configuração deixaremos diretamente nessa <p>, enfatizando que esse código é a base de um rodapé. Em um rodapé "completo", talvez seja necessário configurar a <div>, mas achei interessante deixar na <p>.

O mais importante do rodapé é deixar ele fixo, o pulo do gato neste caso é simplesmente o eixo Z, isso mesmo, z-index, não se esquecendo o width 100% e bottom 0.

.textorodape {
    position: fixed;
    bottom: 0;
    z-index: 3;
    width: 100%;
}

O meu rodapé ficou extremamente simples demais, por isso "decorei" o meu rodapé minimamente deixando o texto com uma sombra clara (no meu caso o texto já é branco), aumentei a distância das letras, segue o código fonte.

.textorodape {
    font-size: 2em;
    padding: 1em;
    text-align: center;
    background-color: #363636;
    letter-spacing: .3em;
    color: white;
    text-shadow: 0 0 0.1em #DCDCDC;
    position: fixed;
    bottom: 0;
    z-index: 3;
    width: 100%;
}

Caso tenha ficado alguma dúvida, de um play no vídeo. Muito obrigado por conferir esse exercício e, se puder, adquira o nosso ebook.

Link para adquirir o ebook.

Código fonte CSS final:

.parallax01 {
    background-image: url(imagem.jpg);
    height: 100vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    position: relative;
    z-index: 4;
}
.texto {
    font-size: 2em;
    text-align: center;
    padding: 1em;
    background-color: #E8E8E8;
    height: 100vh;
    z-index: 6;
    position: relative;
    box-shadow: 0 .1em .5em #E8E8E8;
}
.textoimg
    left: 40%;
    top: 45%;
    width: 20%;
    text-align: center;
    background-color: #111;
    color: #fff;
    padding: .7em;
    font-size: 2em;
    letter-spacing: .3em;
    opacity: .9;

    position: fixed;
    z-index: 5;
}
body h1 {
    font-size: 2em;
    padding: 1em;
    text-align: center;
    background-color: deeppink;
    height: 10vh;
}
footer {
    height: 15vh;
}
.textorodape {
    font-size: 2em;
    padding: 1em;
    text-align: center;
    background-color: #363636;
    letter-spacing: .3em;
    color: white;
    text-shadow: 0 0 0.1em #DCDCDC;
    position: fixed;
    bottom: 0;
    z-index: 3;
    width: 100%;
}

Código fonte HTML final:

<!DOCTYPE hmtl>
<html>
    <head>
        <title>Parallax 07</title>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
        <meta name="viewport" content="width=device-width", initial-scale="1.0">
        <link rel="stylesheet" href="ebook_parallax07.css">
        <link rel="stylesheet" href="reset.css">
    </head>
    <body>
        <h1>Exemplo 07 de parallax</h1>
        <div class="parallax01">
            <p class="textoimg">Parallax</p>
        </div>
        <div class="texto">
            <p>Neste exercício o rodapé vai aparecer por trás do conteúdo.</p>
        </div>
        <footer>
            <div>
                <p class="textorodape">RODAPÉ</p>
            </div>
        </footer>
    </body>
</html>

No próximo exercício desenvolvemos um detalhe no cabeçalho muito legal.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.