Eerste opzet
Eerste opzet
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<div class="rounded-box">
<div class="rounded-header">
<h2>Headertekst</h2>
</div>
<div class="rounded-content">
<p>Dit is de content</p>
<p>Dit is de content</p>
<p>Dit is de content</p>
<p>Dit is de content</p>
<p>Dit is de content</p>
</div>
</div>
<div class="rounded-header">
<h2>Headertekst</h2>
</div>
<div class="rounded-content">
<p>Dit is de content</p>
<p>Dit is de content</p>
<p>Dit is de content</p>
<p>Dit is de content</p>
<p>Dit is de content</p>
</div>
</div>
We hebben een buitenste div, die de class 'rounded-box' krijgt. Die keuze voor een class is bewust, want zo kunnen we meer dan één rounded box op een pagina maken. Binnenin deze div hebben we 'rounded-header' voor de header met een h2 titel er in (h1 bewaar ik meestal voor paginatitels).
Daaronder hebben we een div met classe 'rounded-content' voor de content.
Bekijk voorbeeld 1
Eén image
Ik ga maar één plaatje gebruiken voor het hele effect. Natuurlijk moet het plaatje groot genoeg zijn om de hoogste hoogte en de breedtste breedte op te vangen. Als bestandsformaat gebruik ik GIF, omdat er grote vlakken van dezelfde kleur in zitten.
Bekijk de GIF voor de achtergrond
« vorige pagina | volgende pagina »