home | index | menu | help

Er is geen CSS ondersteuning.

• klik hier voor het css-menu

Deze image-reflection is niet de mooiste ter wereld. Wat wel heel mooi is dat er geen enkel script voor nodig is. De reflectie wordt met puur css op de pagina "gezet". En dit alles nog geheel cross browser ook.

De code stelt werkelijk niets voor. Plaats het onderstaande stukje css in de head-sectie van jouw pagina('s):

<style type="text/css" media="screen">
	pre,.plaatje{margin-left:100px}
	.reflectie img{
		position:absolute;
		clip:rect(60px 1000px 1000px auto);
		-moz-transform:scaleY(-1);
		-webkit-transform:scaleY(-1);
		-o-transform:scaleY(-1);
		transform:scaleY(-1);
		opacity:0.10;-moz-opacity:0.10;
		filter:progid:DXImageTransform.Microsoft.alpha(opacity=10)
		progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=2)}
</style>
<!--[if IE]>
	<style type="text/css" media="screen">
		.reflectie img{clip:rect(0px 1000px 110px 0)}
	</style>
<![endif]-->
		

En de onderstaande "div's" ergens in de body van jouw pagina. Pas de code aan naar wens voor wat betreft de opacity en hoogte van de spiegeling. Je kan een ongelimiteerde hoeveelheid plaatjes op een pagina de reflectie geven.

<div class="plaatje"><img src="reflectie-plaatje.gif" /><br>
	<div class="reflectie"><img src="reflectie-plaatje.gif" /></div>
</div>
		

cache 04-01-2011