KOMPOOS.NL

rounded images

home » css » image-effects » round-image-css.html

css/image-effects/round-image-css.html | php/image-effects/ronde-afbeelding.html | javascripts/image-effects/ronde-plaatjes.html

voorbeeld round image

rond plaatje css

uitleg ronde plaatjes css

Van nature hebben jpg-images geen transparantie-mogelijkheden. Een ronde jpg-afbeelding is zonder hulp van de round image procedure niet mogelijk (zonder hulp van een graphisch programma die ín een vierkant plaatje een rond vignet maakt). Ook andere graphische formats (png, gif) kunnen door deze procedure rond gemaakt worden. De code laat zien dat aan alle browsers aandacht is gegeven. De ronde-plaatjes procedure is cross browser. Om alle problemen met de verschillende versies van IE in één keer "de kop in te dukken" is er voor gekozen om IE in de strict modus van IE7 te "zetten". Om alles naar behoren te laten werken moet de code nauwkeurig, en op exact de juiste plaatsen, neergezet worden. De kopjes geven de plaats al aan, maar voor alle zekerheid nog even een kleine toelichting. De code die helemaal bovenaan de pagina geplaatst moet worden, moet daar ook daadwerkelijk staan/komen. Witruimte boven en onder de code is niet toegestaan. De meta met content="IE=7" moet direct (als eerste regel) ná de <head> geplaatst worden. De rest is zoals op alle andere pagina's: de css in de head en de html-regels in de body sectie van de pagina. Vergeet niet om de hoogte en de breedte van de afbeelding(en), in de html en de stylesheet, de juiste waarden te geven (de werkelijke afmetingen van de img).

code die vóór het <!DOCTYPE> geplaatst moet worden


<!--[if IE]>
	<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v">
<![endif]-->

code die direct ná de head-tag geplaatst moet worden


<!--[if IE]>
	<meta http-equiv="X-UA-Compatible" content="IE=7" />
<![endif]-->

de stylesheet voor de head-sectie


<style type="text/css" media="screen">
	.rounded_image,.rounded_image_ie{
		border-radius:50%;
		-moz-border-radius:50%;
		-khtml-border-radius:50%;
		-webkit-border-radius:50%;}				
</style>
<!--[if IE]>
	<style type="text/css" media="screen">
		v\: * { behavior:url(#default#VML);display:inline-block}
		.rounded_image{display:none}
		.rounded_image_ie{height:180px;width:180px}
	</style>
<![endif]-->

de html-code voor de body-sectie


<p>
	<img  class="rounded_image" style="background:url(http://static.dns5.nl/round-image.jpg);" alt="rond plaatje css" width="180" height="180" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' />
	<!--[if IE]>
		<v:roundrect class="rounded_image_ie" arcsize="50%">
			<v:fill alignshape="false" type="frame" src="http://static.dns5.nl/round-image.jpg"></v:fill>
		</v:roundrect>
	<![endif]-->
</p>