Maandag, 1 augustus 2005

Gerond

Demo geronde hoeken PHP source code
Origineel
Kleur Borderdikte
Origineel Versie met geronde border
Hoe krijg je makkelijk een plaatje met een geronde border? Die vraag is actueel door het redesign van de SUMit website.

Plaatjes op de SUMit homepage komen terug op vervolgbladzijden, zoals voor het on-line rooster programma.

Sara Borremans heeft een fraai ontwerp gemaakt, met allerlei ronde hoekjes. Tot zover alles OK, maar die ronde hoekjes vertalen naar techniek verloopt stroef.

  1. De meeste ronde hoekjes lukken wel met een border-radius van CSS.
  2. Helaas, de meest gangbare browsers ondersteunen border-radius alleen met een workaround.
  3. Geronde borders rond plaatjes lukt lekker in Firefox.
  4. Voor minder geavanceerde browsers werkt een geronde DIV rond een plaatje wel, maar dat is in Firefox weer niet fraai.
Grr, wat een ramp die rondingen met CSS in verschillende browsers. Ik draai nog dol van plaatjes met ronde hoeken.

De met CSS geronde plaatjes gaan hier een jaar of wat het vat in. Zodra de browsers meer op 1 lijn zitten, wordt het tijd voor een herkansing.

Wat nu?

De minst slechte oplossing lijkt me nog om de computer een border te laten tekenen. Als dat niet lekker op de client met CSS kan, dan maar aan de webserverkant met PHP.

Voorbeeld

Een kaal plaatje, zonder border. Hetzelfde plaatje met een groene border op een lichtgrijze achtergrond. Hetzelfde plaatje met een paarse border op een groene achtergrond.

Plussen en minnen

Kotom, het werkt wel, maar het blijft een suboptimale, tijdelijke oplossing. Gerond, maar nog niet afgerond.

Tot de volgende noot,
Henk Jan Nootenboom