foto html - css     . Allerlei - Png schaduw 2

Omschrijving   Voorbeeld

Goed dan, hier nog eentje.
Als je een schaduw wilt maken met een png tekening, dan kom je snel op het probleem dat de schaduw een vierkantje geeft.
Hier is de oplossing:

<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="12" dy="12" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.6)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>

<style>
.shadowed {
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.6));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}
</style>

<img src="plaatje.png" class="shadowed">

 

  vlinder

end
terug
home