Entre em Contato

(43) 999-576-125 Formulário de Contato Skype: alanpatrickk

Como criar seções fullscreen com CSS

Recentemente navegando pelo Facebook me deparei com um artigo que me chamou atenção e decidi abrir o link pra ler o conteúdo. Foi então que me deparei com o tutorial feito por Willian Justen.

Apesar de já conhecer a técnica de “fullscreen” com CSS, achei a postagem do Willian muito interessante devido à sua forma de explicar e ensinar a técnica. Além disso, acabei conheçendo o Viewport Units, que até então eu não conhecia. A partir de então passei a aprender mais sobre esta técnica e testar mais usabilidades dela.

Em resumo, esta técnica consiste em criar seções fullscreen ou em proporção relativa ao monitor (ou tela) em que está sendo exibido. No mundo moderno em que estamos vivendo isto pode ser muito útil e prático para o desenvolvimento de um projeto. Inclusive, como vocês podem perceber, estou usando essa técnica aqui no meu novo layout.

Então vamos lá a uma explicação rápida… Basicamente, você tem duas soluções pra criar seções fullscreen com CSS: A primeira solução, mais simples, é colocar o elemento que desejamos ter altura máxima dentro de algum ponto relativo para que ele se expanda. Vamos analisar o próprio exemplo feito pelo Willian:


<html>
    <body>
        <header>
            <div class="container">
                <h1>Header Full Screen com CSS!!</h1>
                <h2>Dá para brincar e chamar atenção dos usuários! =)</h2>
            </div>
        </header>
    </body>
</html>

Os elementos mais externos que envolvem o header são o html e o body, dessa forma, vamos determinar que ambos ocupem todo o espaço da tela:

html,body{
    width: 100%;
    height:100%;
}

Depois basta definirmos a altura em porcentagem que queremos que o header tenha, no caso vamos colocar um altura de 100%:

header {
    height: 100%;
}

Veja como ficou o exemplo do Willian acessando o site dele.

A segunda solução, mais moderna e mais complexa, seria usar as unidades de medida Viewport Units. Esta incrível unidade, como o nome já diz, trabalha com as unidades de medida da viewport, ou seja, de acordo com o tamanho da tela que ela tiver.

Infelizmente essas unidades não são compatíveis com todos os browsers, mas muito em breve isso não será mais um problema (acredito e assim espero).

Então novamente vamos utilizar o markup de exemplo do Willian:

<section class="height-80">
    <div class="content">
        <h1>Viewport Units são demais!</h1>
        <p>Essa div foi setada para ter 80vh, ocupando 80% da tela =)</p>
    </div>
</section>

Para definir uma altura de 80% da tela usando o viewport units é muito simples: basta utilizar a unidade vh que vai de 0 até 100vh, que é o mesmo que 0 a 100%. Nosso css ficaria assim:

.height-80 {
    height: 80vh;
}

Apenas esta linha fará todo o trabalho pesado! Para ver um exemplo, acesse novamente o site do Willian.

É claro que tudo isso são apenas exemplos. Use a sua criatividade e verá que poderá fazer verdadeiras maravilhas. Apenas seja criativo e não tenha medo de errar!

Para conferir o artigo completo (e extremamente bem feito) de onde extraí exte conteúdo, basta acessar este link.

< Até a próxima, jovens! Pratiquem! />