Ronde hoeken in css

In dit artikel een beschrijving hoe je transparante ronde hoeken in je webpagina kunt opnemen met css. Tabellen of javascript zijn er niet voor nodig, alleen een stylesheet. In de html blijven alleen wat makkelijk te plaatsen regeltjes over voor elk vak waar je de ronde hoekjes op wilt toepassen. De css is cross-browser en cross-resolutie, zodat het past in een pagina met ‘liquid design’. D.w.z. er worden geen maten in pixels opgegeven, maar alleen relatieve maten. Dan is één stylesheet voldoende, en hoeven er geen aparte pagina’s/stylesheets voor verschillende resoluties ontworpen te worden. Dit artikel is een "gebruiksversie" van het uitgebreide artikel Flexibele ronde hoeken (engelse versie ‘Liquid round corners‘) op mijn site. Daarin wordt beschreven welke hobbels ik tegenkwam om zover te komen dat het werkt. Er is daar ook een Flexibele Hoeken Speeltuin, een speeltuintje met een serie voorbeelden en varianten, die de brede toepasbaarheid illustreren. De stylesheet werkt namelijk niet alleen voor ronde hoeken, maar ook voor andere dingen. Veel plezier ermee!

francky

Inhoudsopgave

• Inleiding
• Enkele opmerkingen vooraf
• Het middengedeelte en de zijranden
• De hoekjes en randen naar de achtergrond
• Maar 1 image nodig, en geen 4 of 6!
• De linkerkanten
• De rechterkanten
• Mooi compacte css
• De html in de pagina
• Varianten en diversen

Inleiding

Stel, je wilt dit zien op je webpagina:

• Een tekstvak of kolommetje met ronde hoekjes die aan de buitenkant transparant zijn, en die mooi over een stilstaande achtergrond kunnen scrollen. 
• En hoekjes die flexibel meebewegen met deze "box": als deze geen vaststaande pixel-maten heeft, maar zich elastisch moet aanpassen aan de vensterbreedte of resolutie van de gebruiker.

fig. 1

Dan kan je een 3×3 = 9 cellen tabel maken, met 4 cellen voor de hoekjes, 4 cellen voor de zijkanten, en een middencel voor de content. Dat vraagt nogal wat html-code, en bij meer van die dingen op één pagina tikt dat lekker aan. Nou zou je met javascript een deel van de code’s kunnen afvangen, maar dan gaan browsers zonder javascript (resp. met uitgeschakeld javascript) de mist in. In dit artikel hoe het met zuiver css ook kan.

Enkele opmerkingen vooraf

Er wordt van uit gegaan dat je (met een tekenprogramma) transparante hoekjes en andere transparante figuren kunt maken. Deze kunnen als gif- of als png-bestand opgeslagen worden. Gif-images kennen alleen 0% of 100% transparantie, bij png is een vloeiend verloop (semi-transparantie) mogelijk. Maar semi-transparante png’tjes worden door Internet Explorer niet (niet goed) ondersteund. Soms is een IE-hack mogelijk (zie testpagina), maar die werkt met script. Voorlopig lijken transparante gif-images het best bruikbaar; eventueel moet je wat smokkelen in het tekenwerk bij de randen (bv. iets van de achtergrondkleur meenemen waar overheen gescrolld moet worden).

Er zwerven op internet vrij veel hoekjes-oplossingen die gebruik maken van de "opplak-techniek". D.w.z. er wordt eerst een vak met gewone rechthoekige rand gemaakt, en vervolgens wordt er op de 4 hoekpunten een "negatief" hoekje overheen geplakt. De buitenkant van het hoekje is dan in de achtergrondkleur van de pagina geschilderd, de binnenkant in de kleur van de achtergrond van het tekstvak (of transparant). Dat heeft de volgende nadelen:

• Als de achtergrond een figuur bevat met verschillende tinten, werkt het niet (dan wordt de vaste kleur van de buitenkant van de hoekjes zichtbaar als je gaat scrollen of als de breedte van het venster verandert).
• Je kunt niet hetzelfde stylesheet en dezelfde hoekjes gebruiken voor pagina’s met een verschillende achtergrondkleur. Daarvoor moet je dan extra hoekjes in een aangepaste kleur maken, en de stylesheet dat ernaar verwijst, ook aanpassen.

In het onderstaande doen we het daarom op de positieve manier: de hoekjes worden als echte hoekjes ingemonteerd, er zit niet stiekem iets onder. De binnenkant van de hoekjes is dan in de kleur van de achtergrond van het tekstvak, de buitenkant is echt transparant en niet in de kleur van de achtergrond van de pagina. Zo zijn de hoekjes bruikbaar voor scrollen en voor liquid ontwerp.

Voor uitleg over de gebruikte css-termen verwijs ik graag naar het hoofdstuk css-eigenschappen uit het css-deel van de handleiding html van Hans de Jong.

Het middengedeelte en de zijranden

We delen onze box op in drie partjes: een bovendeel (met linksboven-hoekje, middenboven-lijn en rechtsboven-hoekje), een middendeel (met alleen een linker- en rechterzijkant), en een onderste deel (met de onderhoekjes en het middenonder-lijntje):

fig.2

In het eenvoudigste geval bestaan de zijranden alleen uit verticale lijntjes. Die komen naast alles wat er aan content in de box zit. Bij een bruine lijnkleur, een lichtgrijze achtergrondkleur, zwarte letters in de box, en een afstandje van 10px tussen de zijlijnen en de tekst kunnen we als class formuleren:

.inside {
border-left: 1px solid #C00000;
border-right: 1px solid #C00000;
background: #EFFEF;
color: #000000;
padding: 0 10px 0 10px;
}

Om te vermijden dat er een spleet ontstaat tussen de inside-box en de boven- en onderrand, maken we voor de eerste resp. laatste alinea van deze box de classes aan:

.notopgap { margin-top: 0 }
.nobottomgap { margin-bottom: 0 }

In de html krijgen we nu voor ons middendeel:

En het resultaat is:

fig.3

De hoekjes en randen naar de achtergrond

Voordat we verder gaan met het opzetstuk voor de bovenste hoekjes en de bovenrand, even iets over de methode. Je kunt de hoekjes natuurlijk in de html inmonteren als images, maar dan komt de html bol te staan van de images: telkens weer <img scr="…" alt="…" width="…" height="…">, en dan nog de nodige css voor de posities. In feite ben je dan een tabel aan het nabouwen, met alle html-spaghetti van dien!

Daarom gaan we de hoekjes en de boven- en onderrand via een css-class invoegen als achtergrondfiguur. De attributen komen dan eenmalig in je stylesheet te staan, en de html blijft lekker schoon. In de stylesheet zijn de background-images ook makkelijk goed ten opzichte van elkaar te positioneren.

Tip: over het positioneren van background-images in css is er een apart kort artikel: De
patrijspoort-theorie. Lees dat eventueel eerst even.

Maar 1 image nodig, en geen 6!

Veel hoekjes-oplossingen die ik op internet tegenkwam, gebruiken 6 verschillende plaatjes: 4 voor de hoekjes, 1 voor de bovenlijn, en 1 voor de onderlijn. Of soms ook: 1 image met alles erop en eraan, en dan schermvullend. Maar dat hoeft helemaal niet! We kunnen alle hoekjes en lijnen combineren in 1 image, dat alleen met de schermbreedte rekening hoeft te houden. Met de achtergrondeigenschappen regelen we vervolgens welk partje van het totaal ergens nodig is. Het plaatje ziet er als volgt uit:

fig.4

In fig.4 is het middenstuk er tussen uit geknipt, anders zou de figuur dwars over de hele pagina lopen. Als breedte nemen we de maximaal te verwachten breedte van het vak met de hoekjes; voor een resolutie van 1280×1024 wordt het dus in het echt 1280px breed. In dit voorbeeld is elk hoekje 9px hoog en breed. De boven- en onderkant sluiten aan, en de totale hoogte is dus 18px. Niet vergeten de buitenkant van de hoekjes transparant te maken, anders kan er niet mooi over een meerkleurige background van de pagina gescrolled worden.

fig.5

De linkerkanten

Voor de linkerbovenkant (met de bovenlijn) hebben we van het plaatje alleen de bovenste helft nodig, minus de breedte van de rechterbovenhoek. De bovenste helft bestellen we door een hoogte van 9px op te geven: de onderste helft blijft dan buiten beeld. Het afsnijden van het rechterhoekje doen we door aan de rechterkant een margin van 9px op te geven. Om Internet Explorer in toom te houden, stellen we het letterformaat in op 2px. Anders denkt IE bij een <div> dat het om een normale regel gaat, en kent er automatisch een (te grote) hoogte aan toe: ondanks dat we al bepaald hebben
dat de hoogte 9px moet zijn. De css wordt:

.top-left {
background-image: url('images/corners1280x18.gif');
height: 9px;
margin-right: 9px;
font-size: 2px;
}

Linksonder moet hetzelfde gebeuren, alleen dan met de onderste helft van ons gecombineerde image. Daartoe schuiven we met de background-position het plaatje omhoog met de 9px van de bovenste helft, dus:

.bottom-left {
background-image: url('images/corners1280x18.gif');
height: 9px;
margin-right: 9px;
font-size: 2px;
background-position: 0 -9px;
}

De rechterkanten

De rechterkanten zijn precies het spiegelbeeld, dus van de "margin-right: 9px;" moeten we nu quot;margin-left: 9px" maken om hier niet met de linkerhoeken te overlappen. De lijntjes van de bovenrand (resp. onderrand) liggen bij links en rechts in elkaars verlengde, daar hoeft niets mee te gebeuren. Bij normaal achter elkaar zetten van twee <div>’s komt echter de laatste onder de eerste te staan, omdat <div>’s een block-karakter hebben. Bv. bij de bovenkant:

fig.6

Als  we via "margin-top" de rechterkant in z’n totaal 9px optillen t.o.v. de voorafgaande linkerkant, zijn we daar van af. De css voor de bovenkant rechts wordt:

.top-right {
background-image: url('images/corners1280x18.gif');
height: 9px;
margin-left: 9px;
margin-top: -9px;
background-position: 100% 0;
font-size: 2px;
}

De onderkant rechts gaat analoog, maar dan weer met { background-position: 100% -9px; } om de onderste helft van het gecombineerde image te gebruiken.

Mooi compacte css

Nu we alles hebben, hoeft er alleen nog maar een mooi compact stylesheet van gemaakt te worden. Alle vier de hoekjes-classes hebben bv. hetzelfde background-image, dezelfde hoogte en dezelfde font-size. Dat kan mooi in 1 regel i.p.v. in 4 identieke regels. Ook voor de beide linkerkanten en rechterkanten hebben sommige attributen dezelfde waarde, dat scheelt ook weer.

De complete stylesheet "liquidcorners.css" valt hier te bezichtigen en te downloaden.

De html in de pagina

In de head van de pagina zetten we de verwijzing naar de stylesheet:

En per vakje met ronde hoeken wordt de html eenvoudigweg:

Dat is alles!

Varianten en diversen

Zoals gezegd, staan een aantal voorbeelden in de Flexibele Hoeken Speeltuin. Daar zitten ook enkele varianten bij, met net iets andere stylesheets. En enkele uitbreidingen, want dezelfde techniek is voor veel meer dan alleen ronde hoekjes te gebruiken.

Bijvoorbeeld om met een minimum aan html, css en plaatjes-kB’s een afgescheurd perkament-vel als achtergrond voor een tekstvak te gebruiken. Verandert de schermbreedte of de resolutie, dan verandert het perkament-vak gewoon mee.

Alle gebruiksaanwijzingen voor de stylesheet (en voor de varianten uit de Speeltuin) zijn als commentaar opgenomen in de broncodes ervan: dus dat is alles wat je nodig hebt om te downloaden.

Alle gebruikte stylesheets, voorbeeld-images en een leesmij met overzicht
zijn gebundeld in:

francky’s liquidcorners-homekit.zip (100kB)

Free for phantasy!