Header pleine page en CSS

Attention ! Cet article a plus de 1 an (1023 jours), ce qui signifie qu'il n'est pas forcément à jour !

Aujourd’hui j’ai fait un petit test rapide de l’unité VH (viewport height) pour construire un visuel qui est souvent utilisé de nos jours.

Effectivement, nous voyons souvent un site construit avec une image pleine page dans le "header". Chaque sections suivantes sont découvertes lors du scroll de la page, et chacunes sont aussi pleine page. Habituellement, la première section prend seulement 80% ou 90% de la hauteur du navigateur, ceci permet d’indiquer à l’utilisateur qu’il peut aller plus bas pour voir le reste du contenu du site.

Sans plus tarder voici la démo et par la suite le code utilisé.

DEMO

Comme je le disais, j’ai utilisé une méthode avec le VH, ce qui me permet de faire mon effet seulement en CSS à 100%. Beaucoup de sites le font en utilisant un peu de Javascript pour pouvoir calculer la hauteur du "viewport", et ainsi, placer ses sections suivantes.

Avec le VH, tout se calcule automatiquement. Son support dans les différents navigateurs est d’autant plus très bon. Voici les statistiques surCANIUSE.

Structure

<section class="intro odd">
    <div class="content">
        <img src="melaniedusseault.jpg">
        <div class="textBox">
            <h1>Un header pleine page</h1>
            <p>Ce header est entièrement fait de CSS (voir plus bas le support des navigateurs)</p>
            <em>Crédit photo : <a href="http://melaniedusseault.com/" target="_blank">Mélanie Dusseault</a> </em>
        </div>
    </div>
</section>
<section>
    <div class="content">
        <div class="arrow">&darr;</div>
        <h1>Il existe plusieurs méthode pour faire cet effet. </h1>
        <p>J'ai tenté d'utiliser une méthode utilisant les unités VH (viewport height). <br> Viewport height, 1vh = 1% de la hauteur du navigateur.</p>
    </div>
</section>
<section class="odd">
     <div class="content">
         <h1>Encore un peu plus bas et vous aurez le support par navigateur.</h1>
     </div>
</section>
<section >
    <div class="content">
        <a href="http://caniuse.com/#feat=viewport-units">
            <img src="support.jpg">
        </a>
    <h1>Support pour les <a href="http://caniuse.com/#feat=viewport-units">différents navigateurs.</a></h1>
    </div>
</section>
<footer class="odd"> <a href="http://rdsign.net">rdsign</a></footer> 

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-weight: 500;
    font-family: 'HelveticaNeue';
}
section {
    width: 100%;
    padding: 0 7%;
    display: table;
    margin: 0;
    max-width: none;
    background-color: #3B3A38;
    height: 100vh;
}
section.odd {
    background-color: #BEB2A2;
}
.intro {
    height: 90vh;
    padding: 0;
}
.content {
    display: table-cell;
    vertical-align: middle;
    position: relative;
}
.content img {
    width: 100%;
    height: 90vh;
}
.intro .content {
    position: relative;
}
.intro .content .textBox {
    position: absolute;
    top: 10%;
    right: 5%;
    width: 40%;
    text-align: right;
}
h1 {
    font-size: 3em;
    display: block;
    color: #8D8577;
    font-weight: 300;
    text-transform: uppercase;
}
p {
    font-size: 1.5em;
    font-weight: 500;
    color: #F0ECE4;
}
a {
    font-weight: 700;
    color: #F0ECE4;
    position: relative;
}
.odd h1 {
    color: #3B3A38;
}
.odd p {
    color: #8C8C8C;
}
.odd a {
    color: #373B44;
}
footer {
    padding: 1% 5%;
    text-align: center;
    background-color: #BEB2A2;
    color: #3B3A38;
}
.arrow {
    position: absolute;
    top: 2vh;
    left: 49%;
    font-size: 3em;
    color: #3B3A38;
    background-color: #8D8577;
    padding: 0px 14px;
    border-radius: 30px;
}

DEMO

Beaucoup de CSS est utilisé ici que pour améliorer la présentation visuel. Vous pourrez donc épurer un peu ce dernier.

Catégories :

HTML CSS