radial mask css
geef afbeeldingen een radiaal masker

home | index | menu | help

Er is geen CSS ondersteuning.

	
		
		

vignet

	
		

Zonder een snippertje script kan je afbeeldingen van een radiaal masker voorzien. Eigenlijk kan je dit geen procedure meer noemen. Je zet op een makkelijke manier een (iets aangepaste) img-tag neer, en het resultaat kan je op deze pagina zien.
Ik zal hieronder even de code neerzetten:

<img style="background:url(http://static.dns5.nl/vignet-voorbeeld.jpg);" alt="vignet" width="220" height="190" src='data:image/png;base64,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' />   
		

Vul bij de background-url de naam van jouw afbeelding in, geef een toepasselijke alt-naam en geef de hoogte en breedte van jouw afbeelding op. De rest van de regel hoef je niet te veranderen. Het plaatje hieronder is er neer gezet om te laten zien hoe het er uit ziet zonder de radial-mask-procedure.

vignet-voorbeeld

cache 08-09-2010