Kladblaadje op je scherm

met CSS3 en HTML5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sollicitudin sapien quis augue pellentesque pulvinar. Morbi non ligula eu justo posuere tincidunt sit amet id nulla. Praesent lectus lacus, tristique at dictum ac, porta at magna. Phasellus est nunc, pulvinar non tempor a, condimentum vitae eros. Aliquam auctor posuere lacinia. Praesent eu risus dolor, a mollis leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sollicitudin sapien quis augue pellentesque pulvinar. Morbi non ligula eu justo posuere tincidunt sit amet id nulla.

Hierboven zie je een kader met lipsum-tekst. Het lijkt op papier met vouwen er in, en het ligt niet helemaal vlak. Deze opmaak trekt de aandacht.

Dit wordt helemaal gemaakt met HTML en CSS. Er komt geen JavaScript aan te pas.
Op deze pagina wordt uitgelegd hoe je zoiets aanpakt. De code kunt je downloaden om zelf te gebruiken.

Het is een bewerking van een item dat ik ooit ergens op internet heb aangetroffen. Het enige dat ik er over weet dat het is gemaakt door Neil Pearce, een designer uit Essex, Engeland.

Er worden twee items besproken:
1. De opbouw van de code, in globale termen.
2. Zelf toepassen op je eigen site.
De opbouw van de code
In de <head> van je webdocument link je de benodigde CSS. Op deze bladzijde is ook een webfont van Google gebruikt.
De CSS begint met het instellen van box-sizing: border-box;. Dit geldt voor alle elementen in het webdocument.
Feitelijk is dit het enige dat nodig is voor deze toepassing. Het origineel bevat een uitgebreide CSS-reset.
Het kladblaadje wordt gedefinieerd binnen een wrapper: <div id="page-wrap">.Dit positioneert het kladblaadje in het document.
Hierbinnen ligt een tweede wrapper: <div class="paper">. Dit definieert het papier en de dunne schaduwrand om het papier heen. De papier structuur wordt gemaakt met een achtergrond-plaatje. Dat plaatje vind je in de downloadfile.
De wrapper met class="paper" bevat de content van het kladblaadje. Die bestaat uit een <header> en een oneven aantal <section<-tags. Die worden elk apart opgemaakt.
De <header> bevat de koppen (<h1> en <h2>).
De <section<-tags bevatten de broodtekst. De even en oneven <section<s worden verschillend opgemaakt, waardoor het vouw-effect ontstaat.
Het vouw-effect bestaat uit twee-delen: Het verloop van de papier-kleur en de schaduw buiten het papier.
Het verloop van de papier kleur wordt op elk even element aangebracht (de teller begint bij nul).
De schaduwen worden gemaakt door de schaduw van een <section< eerst 5° de ene kant op te draaien en daarna weer terug, maar dan met een ander middelpunt. De schaduwen verdwijnen onder het papier doordat ze z-index: 1 hebben.
Toepassen in je eigen site
Volg de instructies hier onder, ze staan ook in de downloadfile.
Het webfont dat in dit voorbeeld is gebruikt kun je natuurlijk ook weglaten of er iets anders voor nemen.
Tenslotte
Dit is heel geschikt om aandacht te vragen van de gebruiker. Je kunt er ook goed een menu in kwijt. Positioneer het dan aan de linker- of rechterkant van de pagina en zorg dat het niet uit beeld kan scrollen.
Het is ook geschikt als achtergrond voor kleine websites, van hooguit 5 pagina's. Voor grotere sites kun je beter wat anders kiezen.

Gebruik:

De code staat gedeeltelijk in de <HEAD>, maar voornamelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:

(Zet dit in de <HEAD>).

<link href="https://fonts.googleapis.com/css?family=Overlock" rel="stylesheet">
<link rel="stylesheet" href="styles-120.css">

(Zet dit in de <BODY>, op de plaats waar het kladblaadje moet verschijnen)

<div id="page-wrap">
<div class="paper">
<header>
<h1>Kladblaadje op je scherm</h1>
<h2>met CSS3 en HTML5</h2>
</header>
<section>
<p>Lorem ipsum dolor sit amet, (....) a mollis leo.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, (....) amet id nulla.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, (....) amet id nulla.</p>
</section>
</div> 
</div>

Downloaden:

Druk op de knop: File: voorb120.zip, 5060 bytes.