Pochoir de page web sur image

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

Des fois, nous essayons de trouver de nouvelle façon de présenter un site web. Nous faisons des tests, des gribouillages, des petits bouts de codes, sans toutefois nécessairement réinventer la roue à chaque fois. Durant l’une de mes sessions de tests, je cherchais à afficher une image plein écran, avec une structure différente du texte. Je voulais que dans le texte des espaces laissent voir l’image du fond, donnant l’accent à certains éléments de cette dernière.

Voici 2 exemples:

MO 1 MO 2

Pour la démonstration #1, vous avez à tout simplement envelopper votre texte de deux DIVs; ici ce sont

<div class="container">
        <div class="thebody">
                Votre texte
        </div>
</div>

Voici le CSS pour cet exemple :

<style type="text/css">
        body,
        .thebody{background:#252a31;margin: 0; color:#fff;}
        a {color:#909090;}
        .container, 
        .pochoir{background:#252a31 url(les0045.jpg) top center no-repeat fixed;}
        .container {margin: 0 auto;width: 1024px;}
        .thebody {margin: 0 auto;max-width: 790px;padding: 3em;}
        .pochoir{height:200px;}
</style>

Le secret ici est assez simple; la position fixed de l’Image. Donc, ces deux exemples ne sont qu’une base, je suis persuadé qu’il y a moyen de faire de quoi de vraiment artistique avec ce concept. Laissez moi savoir ce que vous avez fait avec cet exemple.

Catégories :

HTML CSS