CSS: Liquid Rounded Corners

Inleiding
Je kent ze wel; die ronde hoekjes aan boxen die dat "ik-ben-net-met-CSS-begonnen" effect als sneeuw voor de zon laten verdwijnen. Er zijn allerlei methodes in omloop en die van mij is dan ook zeker niet vernieuwend. Het is gewoon de manier waarop ik het doe.

Het doel
Wat ik wil, is een box met een headergedeelte voor een titel en een contentgedeelte voor de tekst. De style van het header-gedeelte moet kunnen verschillen van de style van het contentgedeelte. Alle hoeken moeten afgerond zijn (andere grafische vormen zijn trouwens ook mogelijk) en ik wil een schaduw aan de rechter- en de onderkant kunnen zetten. De breedte en de hoogte van de box, de header of de content mogen niet uitmaken. Dit laatste binnen het redelijke; met breedtes van 4000 pixels en lettergroottes van 2000em houden we geen rekening.

Rechterkant: achtergrond van div.rounded-header

De header-div krijgt als achtergrond de rechterbovenkant van het plaatje. Dat bereik je met de volgende CSS:

    div.rounded-header { background: url(rounded.gif) right top no-repeat; }

Bekijk voorbeeld 2

Rechterkant: achtergrond van div.rounded-content

De rounded-corners div krijgt als achtergrond de rechteronderkant van het plaatje. Dat bereik je met de volgende CSS:

    div.rounded-corners { background: url(rounded.gif) right bottom no-repeat; }

Bekijk voorbeeld 3

Als je het voorbeeld bekijkt, zie je meteen het eerste probleem; de tekst loopt aan de onderkant te ver door. Dit wordt veroorzaakt door de schaduw die ons plaatje aan de onderkant heeft. Die schaduw zit trouwens ook aan de rechterkant, dus daar kan hetzelfde probleem ontstaan. In mijn voorbeeld gaat het toevallig goed, maar daar mogen we niet van uit gaan.

Gelukkig is dit probleem eenvoudig op te lossen: we geven div.rounded-content een padding aan de onderkant. Dat zou kunnen met padding-bottom, maar omdat ik nog andere paddings nodig heb, gebruik ik meteen de shorthand-notatie: padding: boven rechts onder links; Je geeft dus vier waarden op, met de klok mee. Als je 0 opgeeft, hoeft er geen px bij. In dit geval gebruik ik padding: 10px 20px 20px 10px; Aan de rechterkant en de onderkant dus 20px, zodat er ruimte is voor de schaduw. De padding van de header nemen we meteen even mee.

Bekijk voorbeeld 3 verbeterd

Dit voorbeeld is al schaalbaar. Maak de tekst in je browser maar eens groter, dan zul je zien dat de achtergrond keurig meeschuift.

Eerste opzet

<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>

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

Linkerkant: achtergrond van h2 in de header-div

De h2 header in de header-div krijgt als achtergrond de linkerbovenkant van het plaatje. Dit kunnen we veilig doen, zolang je maar zorgt dat er altijd een h2 header in div.rounded-header staat.

Bekijk voorbeeld 4

Hier komen we het tweede probleem tegen; de achtergrond van de h2 komt nu boven de achtergrond van div.rounded-header te liggen! Dit lossen we op door de h2 een marge van 20 px aan de rechterkant te geven. Dit betekent trouwens meteen, dat de padding aan de rechterkant weer op 0 kan.

Bekijk voorbeeld 4 verbeterd

Ook nu maken we de tekst in de browser even wat groter om te kijken of alles nog goed gaat.

Linkerkant: de content-div
We hoeven nu alleen nog de linkeronderkant te doen. Omdat we in het begin div.rounded-box hebben gebruikt voor de rechteronderkant, hebben we nu div.rounded-content nog beschikbaar voor de linkerkant.

Met de content-div krijgen we hetzelfde probleem als met de h2 in de header-div; de achtergrond mag aan de rechterkant niet overlappen. Daarom krijgt de content-div een rechtermarge. De padding aan die kant kan dan op 0.

Bekijk voorbeeld 5

Schaalbaarheid in de breedte
Om te checken of deze methode ook in de breedte schaalt, nog een voorbeeld op een andere breedte (met uiteraard dezelfde code):

Bekijk voorbeeld 6

Floating elements in de content
Tot slot: wat nu als je binnen je content floats nodig hebt? Bekijk het volgende voorbeeld:

Bekijk voorbeeld 7

Als het gefloate element langer is dan de tekst van de content, gaat het fout. Gelukkig is er een simpele oplossing voor: geef het element waarin de float zich bevindt een overflow: hidden en een width. Omdat de rechterkant van de content-div een marge moet houden, geven we width: 90% op.

Bekijk voorbeeld 7 verbeterd

Tot zover deze CSS tut over rounded corners en shadows. De tutorial is gemaakt naar aanleiding van dit topic. Tijdens het maken van deze tutorial kwam ik erachter dat het nog iets efficienter kon dan ik in het topic gedaan had. Waar het maken van een tut al niet goed voor is ;-)

groeten, Jan Koehoorn