Artikelen

Gepost door joost op 29 jan 2011 in de categorie CMS PHP HTML Algemeen

Het maken van afgeronde hoekjes op IMG elementen is een lastige opgave. Er zijn twee oplossingen voor dit probleem. Deze zal ik hier beide beschrijven. De eerste oplossing werkt in alle browsers, maar heeft geen anti-aliasing. De tweede werkt niet in Internet Explorer 8 en lager, maar heeft wel anti-aliasing.

De eerste oplossing is een script dat gebruik maakt van een PHP library genaamd GD. GD kan bewerkingen uitvoeren op afbeeldingen. Deze oplossing maakt dus geen gebruik van CSS. Je vindt het script hier, of door te zoeken op 'rounded corners with GD'. Wanneer je normaal gesproken de source van je afbeelding zou aanroepen:

1. src="mijnafbeelding.png"

doe je nu het volgende:

1. src="apply-round-corner.php?source=mijnafbeelding.png"

Zoals gezegd ondersteund deze oplossing helaas geen anti-aliasing. Om afgeronde hoekjes te maken via CSS3 moet je de volgende CSS code gebruiken:

1. img {
2. -moz-border-radius: 15px;
3. border-radius: 15px;
4. }

Dit blijkt vervolgens nog niet te werken, omdat de afbeelding zelf in de voorgrond staat. Verander je afbeedling daarom in de volgende code:

1. <img src="blank.gif" width="300" height="200"
style="background: url(mijnafbeelding.png);" />


Deze code zal een lege transparante gif van 1px bij 1px (wel even aanmaken) op de voorgrond zetten en de werkelijke afbeelding in de achtergrond van de IMG tag. Als de rest van je layout ook gebruik maakt van CSS3 afrondingen dan zou ik deze oplossing gebruiken, omdat de afgeronde hoekjes dan consequent wel en niet (<IE9) getoond worden.