Maandag, 1 augustus 2005
Gerond
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.
- De meeste ronde hoekjes lukken wel met een
border-radius van CSS.
- Helaas, de meest gangbare browsers ondersteunen
border-radius alleen met een workaround.
- Geronde borders rond plaatjes lukt lekker in Firefox.
- 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 ronde hoeken vergeten?
Hmm, dan verstoort het hele ontwerp.
- Van ellende maar zelf in de plaatjes ronde hoekjes met een tekenprogramma maken?
Nee, dat betekent dubbel onderhoud.
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