Introdução

Fala pessoal, como o ultimo post que eu escrevi teve uma recepção muito legal, resolvi dar continuidade e ensinar coisinhas úteis com css, que podem ser interessantes e utilizadas no seu dia-a-dia de trabalho.

Eu resolvi fazer em vídeo, porque fica mais fácil de mostrar cada detalhe, e bom, assim se você nunca fez um curso meu, já pode ver a didática para ver se gosta.

A proposta desses vídeos é fazer algo bem “cru”, sem edições, assim você vai vendo de fato na prática como eu fui fazendo as coisas e explicando e até mesmo os erros (que, é claro, sempre acontecem). Acho que assim é melhor do que aqueles vídeos super editados, onde só tem copia/cola e no final você nem entende nada do que aconteceu. Se você achar que assim ficou muito ruim/lento, por favor, deixe seu feedback também.

Demo live

Você pode ver o exemplo final através desse link e se reparar, eu resolvi separar esse post e vídeo em duas partes, que serão:

Assim fica mais leve para você, podendo ver só o que se interessa e também ajuda o meu SEO, que vai ter duas entradas diferentes =p

Vídeo

Código e detalhes

O vídeo já é bem explicativo, então eu não vou entrar em muitos detalhes, só vou deixar aqui alguns links complementares, que podem ser importantes para você, caso não tenha entendido alguns dos pedaços:

E o código que temos na aula por enquanto é, primeiro o markup html:

<body>
    <input id="menu-hamburguer" type="checkbox">

    <label for="menu-hamburguer">
        <div class="menu">
            <span class="hamburguer"></span>
        </div>
    </label>
</body>

Onde eu criei um input e label para fazer o funcionamento do estado :checked e o hamburguer, que eu resolvi usar só um elemento e o :before e :after.

O nosso CSS dessa primeira parte ficou assim:

*,
    *:before,
    *:after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background: #81ecec;
    }

    .menu {
        background: #fff;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        position: fixed;
        bottom: 25px;
        right: 25px;
    }

    .hamburguer {
        position: relative;
        display: block;
        background: #000;
        width: 30px;
        height: 2px;
        top: 29px;
        left: 15px;
        transition: .5s ease-in-out;
    }

    .hamburguer:before,
    .hamburguer:after {
        background: #000;
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        transition: .5s ease-in-out;
    }

    .hamburguer:before {
        top: -10px;
    }

    .hamburguer:after {
        bottom: -10px;
    }

    input {
        display: none;
    }

    input:checked ~ label .hamburguer {
        transform: rotate(45deg);
    }

    input:checked ~ label .hamburguer:before {
        transform: rotate(90deg);
        top: 0;
    }

    input:checked ~ label .hamburguer:after {
        transform: rotate(90deg);
        bottom: 0;
    }

Tem ali também um “reset default”, que sempre uso nesses experimentos básicos e também as transitions e transforms que foram necessários para rotacionar os elementos e criar a animação necessária.

Conclusão

Bom pessoal, espero que tenham gostado do post/vídeo, é uma nova modalidade que eu quero estar testando. E se você curtiu, não deixe de se inscrever lá no Canal do YouTube e também compartilhar com a galera.

Lembrando que amanhã (se você estiver lendo no dia que lancei), vai ter a segunda parte, onde eu ensino a criar o menu. Se esse dia já passou, vai ter o link aqui direitinho para o próximo post/vídeo.