css/wet-floor-effect.html | javascript/wet-floor-effect.html | php/wet-floor-effect | php/natte-vloer-effect | imagick/natte-vloer-effect
Er is geen javascript nodig voor deze, cross browser, wet floor procedure. Plaats de css-code in de head-sectie van jouw pagina, en de html-regels in de body-sectie (waar het natte-vloer-effect moet komen). De doorzichtigheid van het effect kan ingesteld worden met de opacity-waarden. Bij de prog-id's regel je de waarde(n) voor IE, en alle andere opacity-statements gelden voor de overige browsers. De lengte van het natte vloer-effect wordt bepaald door de clip:rect waarden. Voor de strict-browsers hoef je alleen het eerste getal (is nu 120px) in te stellen, voor IE is dat het derde getal (is nu 80px).
<style type="text/css" media="screen">
.plaatje{
margin-left:100px}
.wet_floor img{
position:absolute;
clip:rect(120px 1000px 1000px auto);
-moz-transform:scaleY(-1);
-webkit-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
opacity:0.30;-moz-opacity:0.30}
</style>
<!--[if lt IE 9]>
<style type="text/css">
.wet_floor img{
clip:rect(0px 1000px 80px 0);
filter:progid:DXImageTransform.Microsoft.alpha(opacity=20) progid:DXImageTransform.Microsoft.BasicImage(rotation=2,mirror=2)}
</style>
<![endif]-->
<!--[if gt IE 8]>
<style type="text/css">
.wet_floor img{
clip:rect(0px 1000px 80px 0);
background:white;color:inherit;
filter:flipv;}
</style>
<![endif]-->
<div class="plaatje">
<img src="jouw_wet_floor_afbeelding.gif" /><br>
<div class="wet_floor">
<img src="jouw_wet_floor_afbeelding.gif" />
</div>
</div>