O Em Busca do Código é um site em formato de plataforma de ensino a distância (EAD), totalmente aberta e gratuita.

Aprendendo e ensinando, essa é a minha regra para mim.

Publicado dia 05 de dezembro de 2017.

Compre um adesivo do Em Busca do Código.

Publicidade

Publicidade

Publicidade

Rodapé responsivo simples com HTML5 CSS3, vídeo 103

Bem vindo a mais uma dica de HTML e CSS3 da Em Busca do Código, e nesta dica nós iremos desenvolver um rodapé responsivo simples com HTML e CSS.

Este é o rodapé que está atualmente em nosso site. Um rodapé com logotipo e nome de um lado, e cinco redes sociais do outro.

Para fazer este exercício você precisa de um editor de código e um navegador, eu utilizo o Brackets e o Firefox, mas você pode utilizar o de sua preferência.

Assista ao vídeo:

Temos dois arquivos iniciais, o redape.html e o rodape.css, alem de um reset.css. O HTML tem um padrão inicial com doctype, a tag html informando a linguagem que o texto está escrito , a tg head com título, declaração de caracteres e os arquivos css linkados.

Nos arquivos CSS temos o reset.css que reseta as configurações padrões dos navegadores, e o rodape.css inicialmente está em branco. No html nossa tag body não tem nenhuma informação ainda.

Nesta dica nós faremos apenas o rodapé, sim, o arquivo terá apenas o rodapé, e para fazer isso nós utilizamos a tag footer.

<footer>
</footer>

A primeira tag filho da tag footer será uma <div>.

<div class=”logotipo”>
</div>

Já informando uma classe que iremos configurar via CSS.

Mas como será nosso rodapé?

Por mais que nosso rodapé seja responsivo ele é simples, nós dividiremos ele em apenas duas partes.

Nós já fizemos a primeira parte que irá ficar o logotipo e o nome, a segunda parte ficará com cinco redes sociais, sendo apenas cinco links, para isso vou utilizar a tag nav.

<nav class=”redes”>
</nav>

Publicidade

<nav class=”redes”>
</nav>

Já informando uma classe que utilizaremos no CSS. Dentro da nossa <div> nós teremos um logotipo, e para isso utilizo uma <img>.

<img>

Eu já separei 6 imagens, segue o link para download.

Download das imagens

Onde você salvou os arquivos html e css de preferência crie uma pasta chamada img e coloque essas imagens nessa pasta.

<img src=”img/logotipo.png” alt=”logotipo”>

Publicidade

E depois da tag img colocamos uma pequena frase ou o nome do site, no meu caso gosto de colocar:

Sempre Em Busca do Código

Agora vamos para as redes sociais. Temos uma lista com redes sociais em nosso rodapé, por isso nós iremos utilizar uma tag ul, com cinco itens.

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Dentro de cada item temos um link, por isso, utilizamos a tag a.

<ul>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
</ul>

Cada rede social será representada por uma imagem, incluindo dentro de cada tag a uma <img>.

<ul>
    <li><a><img></a></li>
    <li><a><img></a></li>
    <li><a><img></a></li>
    <li><a><img></a></li>
    <li><a><img></a></li>
</ul>

Agora é hora de linkar suas redes sociais na tag a, e um target para o link abrir em outra aba, e depois linkar as imagens na tag img, e algo importante da tag img é o atributo alt, segue o código fonte exemplo de um dos itens dessa lista.

<li><a href=”https://www.facebook.com/embuscadocodigo” target=”blank”><img src=”img/facebook.png” alt=”Nosso perfil no Facebook”></a></li>

Terminou a parte difícil, vamos ao CSS.

Publicidade

No CSS a primeira informação que insiro é deixar o rodapé sempre para baixo.

footer {
    posicion: absolute;
    bottom: 0px;
    width: 100%;
}

Esse trecho (acima) do nosso código fonte só existe porque neste exemplo essa página não tem mais conteúdo, caso coloque esse rodapé em uma aplicação, esse trecho não é necessário.

Continuando, vamos começar pelo logotipo.

.logotipo {
}

Sem maiores informações, nós estamos configurando o layout em modo retrato, caso você não conheça breakpoints por favor veja nossa dica de número 100, lá você faz um site responsivo em minutos. Um site simples, porem responsivo.

Nesse layout mobile a <div> com nosso logotipo ficará acima das nossas redes sociais.

.logotipo {
    width: 100%;
    text-align: center;
    font-size: 0.7em;
}

Nossa <div> com o logotipo cobrirá a tela toda, mas a imagem não.

.logotipo img {
}

Quando nosso usuário estiver vendo nosso site ou aplicação em modo retrato o logotipo terá 20% da tela (horizontalmente) e, também estará alinhado verticalmente.

.logotipo img {
    width: 20%;
    vertical-align: middle;
}

Agora vamos para nossas redes sociais.

.redes {
}

Que também recebem um width de 100% e são centralizadas.

.redes {
    width: 100%;
    text-align: center;
}

Cada imagem recebe um width e 18%.

.redes img {
    width: 18%;
}

E precisamos colocar essa lista horizontalmente e retirar a configuração padrão de listas.

.redes ul li {
    list-style-type: none;
    display: inline;
}

Testando em nosso navegador vemos que nosso rodapé já recebe o formato mobile.

Assim como está no Em Busca do Código, vou adicionar apenas dois breakpoints, o primeiro, teoricamente, é para tablet.

Toda configuração que estiver dentro deste breakpoint será vista apenas para quando a janela ou tela estiver com resolução entre 450 até 768px.

footer {
    clear: both;
    width: 100%;
}

Nesta resolução o rodapé tem todas as informações na mesma linha. Classe logotipo fica na esquerda e a classe redes na direita.

.logotipo {
    width: 50%;
    float: left;
    text-align: left;
}
.redes {
    width: 50%;
    float: right;
}

Agora vamos na versão desktop.

@media only screen and (min-width: 769px) {
}

Nessa configuração gostei de adicionar uma pequena margem inferior em nosso footer.

footer {
    width: 100%;
    margin-bottom: 3%;
}

Aumentamos um pouco o tamanho da fonte do texto do logotipo.

.logotipo {
    font-size: 1em;
}

Outra diferença na classe logotipo é a proporção/tamanho do seu conteúdo.

.logotipo {
    font-size: 1em;
    width: 45%;
    float: left;
    text-align: center;
}

As imagens, o logotipo e as redes sociais terão um width de 10% na versão desktop. Dependendo da tela do usuário isso pode ficar estranho, mas são extrema minoria.

.logotipo img, .redes img {
    width: 10%;
}

E as redes sociais (classe redes) na versão desktop também tem um width de 45% e um detalhe especial que é uma margem.

.redes {
    width: 45%;
    float: right;
    margin-rigth: 1%;
    text-align: center;
}

Fez esse rodapé, gostou, sabe como melhora-lo? Me envia algum feedback.

A seguir você confere o código fonte final HTML.

<!DOCTYPE html>

<html lang="pt-br">
    <head>
        <title>Rodapé simples</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="rodape.css">
        <link rel="stylesheet" href="reset.css">
    </head>
    <body>
        <footer>
            <div class="logotipo">
                <img src="img/logotipo.png">
                2017 Em Busca do Código
            </div>
            <nav class="redes">
                <ul>
                    <li><a href="https://www.facebook.com/embuscadocodigo" target="_blank"><img src="img/facebook.png" alt="Nosso Facebook"></a></li>
                    <li><a href="https://plus.google.com/115289918651298518386" target="_blank"><img src="img/google.png" alt="Nosso Google plus"></a></li>
                    <li><a href="https://www.youtube.com/channel/UC6EgJeCFC-P96Y0Gvla0Z3w" target="_blank"><img src="img/youtube.png" alt="Canal no YouTube"></a></li>
                    <li><a href="https://www.instagram.com/embuscadocodigo/" target="_blank"><img src="img/instagram.png" alt="Perfil no Instagram"></a></li>
                    <li><a href="https://www.twitter.com/embuscadocodigo/" target="_blank"><img src="img/twitter.png" alt="Perfil no Twitter"></a></li>
               </ul>
            </nav>
        </footer>
    </body>
</html>

Código fonte CSS (completo)

footer {
     position: absolute;
     bottom: 0px;
     width: 100%;
}
.logotipo {
    width: 100%;
    text-align: center;
    font-size: 0.7em;
}
.logotipo img {
    width: 20%;
    vertical-align: middle;
}
.redes {
    width: 100%;
    text-align: center;
}
.redes img {
    width: 18%;
}
.redes ul li {
    text-transform: uppercase;
    list-style-type: none;
    display: inline;
}
@media only screen and (min-width: 450px)
and (max-width: 769px){
    footer {
        clear: both;
        width: 100%;
     }
     .logotipo {
         width: 50%;
         float: left;
         text-align: left;
     }
     .redes {
         width: 50%;
         float: right;
     }
}
@media only screen and (min-width: 769px) {
    footer {
        width: 100%;
        clear: both;
        margin-bottom: 3%;
    }
    .logotipo {
        font-size: 1em;
        width: 45%;
        float: left;
        text-align: center;
     }
     .logotipo img, .redes img {
         width: 10%;
     }
     .redes {
         width: 45%;
         float: right;
         margin-right: 1%;
         text-align: center;
     }
}

Publicidade

Repetindo o último parágrafo, fez esse rodapé, gostou, sabe como melhorá-lo? Me envie algum feedback.

Curso aberto de Parallax

Para a W3C, parallax é uma tendência, onde o conteúdo do fundo é movido em uma velocidade diferente do conteúdo do primeiro plano.

Breakpoint em HTML5 CSS3. Vídeo 100

Layout é a disposição dos elementos de um site, o layout é um esboço de como ficará a distribuição física dos elementos.

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