CSS boxen kan je vergelijken met het weergeven van info via een tabel, alleen nu gaan we geen tabel gebruiken (zeker niet voor de layout van een website) maar aleen CSS met 5 kleine afbeeldingen, 1 voor elke hoek en 1 voor de achtergrond op te vullen. Deze zijn uiterst geschikt als navigatie doeleinden of weergeven van inhoud daar ze fluid zijn, dit wil zeggen de boxen passen zich aan aan de inhoud.

Bij deze tutorials blijft de Xhtml en CSS hetzelfde, het enige wat veranderd zijn de (kleine) afbeeldingen.

Css box - Ronde hoeken

De universele (X)Html

Kleine tip:

Het voordeel van Xhtml is dat je eigenlijk nooit meer je Html code moet aanpassen als je veranderingen wilt doorvoeren aan je website, je Html blijft hetzelfde, het enige wat je moet aanpassen is de CSS.

<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
<p>Oh my, the ineffective worm cravenly
set in lieu of this tyrannical flamingo. Hmm,
that hamster is far more artful than this
intuitive nutria. Wow, the ferret is far
more sedate than a lame seagull. Ouch, this
rabbit is more methodic than some distant hedgehog.
Crud, one walking stick is much more unwilling
than a constant dog.</p>
</div>
<div class="rbbot"><div></div></div>
</div>

De universele Css

Zoals gezegd bovenaan, blijft ook de CSS hetzelfde, het enigste wat veranderd zijn de afbeeldingen, dus als je 3 kleuren variaties wilt hebben, moet je de CSS aanpassen zodat ze ook naar de afbeeldingen verwijzen.

Dus als je afbeeldingen in de map groen staan, dan verander je in je CSS background: url(groen/nt.gif), dit herhaal je natuurlijk voor alle 5 afbeeldingen.

.rbroundbox { background: url('nt.gif') repeat; }
.rbtop div { background: url('tl.gif') no-repeat top left; }
.rbtop { background: url('tr.gif') no-repeat top right; }
.rbbot div { background: url('bl.gif') no-repeat bottom left; }
.rbbot { background: url('br.gif') no-repeat bottom right; }
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 50%; margin: 1em auto; }

De kleuren afbeeldingen

Opgelet met zwarte achtergrond.

Dan moet je de tekstkleur naar wit zetten anders zie je niets :
.rbcontent { margin: 0 7px; color: #fff; }

#0066FF : blauw 1 Blauw 2 Blauw 3 Blauw 4 Blauw 5 Voorbeeld

#FF9900 : Oranje 1 Oranje 2 Oranje 3 Oranje 4 Oranje 5 Voorbeeld

#00CC00 : Groen 1 Groen 2 Groen 3 Groen 4 Groen 5 Voorbeeld

#CC0000 : Rood 1 Rood 2 Rood 3 Rood 4 Rood 5 Voorbeeld

#996633 : Bruin 1 Bruin 2 Bruin 3 Bruin 4 Bruin 5 Voorbeeld

Nu om je ook nog zelf iets te laten doen, als je een andere kleur wilt, open de afbeeldingen in je favoriete afbeelding-verwerkings-programma en verander de kleuren.