KOMPOOS.NL

gradiënt radial mask - CSS

home » css » image-effects » gradient-radial-mask.html

sitemap


voorbeeld radial mask

vignet

uitleg radial gradient mask procedure

Voor dit fraaie effect heb je geen stylesheet of scripts nodig. Een img-tag (met een heleboel code daar in) regelt dit op een cross browser manier voor jou. Vervang de url in de img style= in één die jij wilt tonen, en plaats de img-tag ergens op jouw pagina (waar de afbeelding moet verschijnen).

html regel voor het radiale masker voorbeeld

<img style="background:url(http://static.dns5.nl/radial-mask.jpg);" alt="radial gradient masker" width="200" height="298" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAALtElEQVR4nNWc7XLjuA5EMXby/g+c2Hd/7MADtbrxQcqZvahSkaIoEcRRg5Jj55eZ/c/MnqaNHXsO6leVzJfMb7dbsn+7qKza1P6p7cNmMLL9LICs3AXSgeH9WCCutFsY5wltXjeyf/Lvl5k9yACVKuL+qiquVErHdpXxI2r5II3vTFGrbex6lc8dVcS7WvWPd3rHJmrBMZ+okBUYu6qYqCarK1N3aVcNO2qpxj7tR4XsrBddCBMQ71hDVL17fseYolCFeM3XviukE3xVnyhhFQ4rmU9o6k5cUcdEQVmZ1tlTVheA1yfqWAGUjV2ZytuqNKivmhoDj+F4T1zUr1gvpkDeCYU9bk5gTEFVDwDluL/M7ItcZApjAqTb1hmb+WvGA9dNV539K1PZoZ6lrApKd51QAKYpTfnEjAHC9HUzfacqlWRtmbVTmHrKmsBYSUtTOFnZsQgBA4N1g30GpwI28esAyIFMU5SXK4rogjJSZ2VlSh1eZinJx2HtK2MzlZwUMoVRqWMFyjuBmPXWDQx8BmEHko9LUxhLWRMYVwR+N3Wh/9MFvQulgmThfGXlUximrHenJ9y+RXs2RvTLxL4Zf4qpgKzc7atqoSqJKetd6UkFnfXrXD/6iHU2aaxn68bqpqxSTPTtaYVCujCuUkU3jbEymyjWrwDCPiVH68A4pTBUyCRV7QKYgkEfDerZpFW5CuG7eY7yR6VYmbJ2gbBgY9uKUtDPjqFKpkAcBIPQUQoaKucAiKWsVRhdJXw3z2Fjoq9G6nGiWF9RB+t/NaSXn1nK6gDZhdBREo5tocT6aYJJ2VXHt9UgpulMWlTIBMZVILppjPkYy8wyGHH/w3jgsn0GaEchr0W9AyTL+TsgOimMQTGoK1NAYt3zOEKJfZhaKvWM4UQgZjoYV4NYAZKpg4FRa0iWthCKOifCQBAqfbXgsDVkBcYOCJW+OlDM+NeY3O6h3n3CUn29jsqIfZRqLGl/huuc1pCrYEwAdNYT9/ER6rFU5kGwUN5tDuSDXIsppaOa2H5a5HENWYWxEvjv4nzf4pcwlEomKesZ6g4npqmYtvBcBWkVzMmmQFYDvwLkQcZHGJVCEAoG9wmlAsHOZ23bYCZAdmF02xQIBcXI/g2OdRZzVNEH2WdAPPAMRgSB6wmF0gUyhVG1seNfYjwGokpXbtUdHdcCD/xn6JOBUGUGiKnlsHWA7MBQx3H/Qfp21MFUwtSBJVPIJPAYdLboe1mp5WArKWsFRlb/EteL45r1obipRV1tDiWmqzuc78HFa3qpQGXp7GAVEHW37sDANFWBzlJWlq5isLzOFmHW7ubXz0BUEJRC6AI/XUNU+tqBwfp31pFYxnqWsthTFnszx3PxOmbrkNDvg1oyIJU6qnoXxhRIBiNa9chbrR+qHkGowGfHWMp6LfCdN/VMHRkItZ/BWAGSpa3Ogq4WbrNzgL9EOwb6SdoqKK+LYW7urilTECxNKQX9TSAx2LjfgcJgKJ9Pvr/z014MNr7wfZPtbwDJ0o2RfQw6Aoj9u2o5DMQmegWE2PYwDkClqQyKQd2g7nYL7fhGjjBUunIf2P6n1QCwbkl5GGR3Y4FjYLLz1eIeg6BUYmH/BscQRDSHwQLKYhT7fNm/UNSNgvUKzGkwlQ52oLjjEzCda8oJwX6EgerAjzFYWkJfMMU/fl9noo4SiEHnK7e4bnRSVoRQQTxNhhjCQIs5XN2EDNKOUtoK6VzoXVsV/E7KQmV0jT0RsXFUm/JrG0h18Smgzsfo001N6jSxoWXzqmJg9id1TYHggwdNWZmDmdPqGPZhfbvnZgphk+xa5sONtFly3Br9btDn5XMnZWUBV+3qt+8K0I5a0GIbLurMsE8HCtt3lajAd1RCP9nEk+J+RxFWHJ8E+oo+an9y46nYdJSBdeW7mZ2lkw1upL0LgVl2vpH2lT5qXlmfar7oQzVW1g/LZ6aQyqHV4xXEk5PivMkdrfqxPlk/s7Of8Tj+I5+Ocg7j41stdureLdEexfHKqrtfKWqlXxZs1rdz57NjVf11jc4TSSctdCcxPV75tOP7ynid626BwRcoNdFO4LrgOinjausEsKu07PjqnE4pa3zi/4mxT3H/hrWh/bSj+EehVT+uDHR1rR+N0WogVsZhEDI43QDt9Fu91o6pv9mbWfKFLXEhlbJu4rhq747BAvEkfbOAsS874I2QBqnoM62n1+7cnewuro5l53Su0x1ztx/2wfZMQW8BFL/TykwdyxRxF+3Z9oR+9rtNKQRfaKu7GsEohWSple1fAeUw3gc0+uRiiY50U1PWn/XBcbOgq37s+mostbG+BnUT7XdoV35I/3ANYTAqCKyvaquUgZPB9SILvjIVZDWmUhADUKmle97r3PiNPTb5LLAZhLtpsAoM1nGSq6YC3VVMN6j3QV/07dXngxzEdNABs9qWTRgdXjF2l68AWO2PcyrnXClEqaATbCPtGRQfp/r2h/KRGd6VUyhdCEodlUpO/bsK6QS20yd+MU05HUtmCAFvKDy/A+UDSqxfDVBuUSE+KTWBTsBxQIN+WUDY1yzRIgwFBvvHOvNjN/DVz6xHoDBlYR2DXk3se7DvbRbaYxDVtyq9D3sUtnAc69UdWqmEgftMrrcC5fBi2JkETqhzzH8WhnBiG36D8Glnhbif+HG5+vhEzSf6h0GOUDJAmaq2FIcvhmwCcSKxjne8Oha/GVgph30FM243qPt1lSEUpZJKFaztM+mzDAvXkBg4g7ILR9U/f5+jVOFjKxgIBX1VpuZSQcFAx+O4bqi+E1gSCN5VcRJe7wDI6mZHENXXOXENqf7Kx+ZTAekG9k7aL9uypyycBPstxQSGB/+r6MPWDx8PVVKpA+fg5SoUBmO1bAFRatkFo1JXTFVeZirBdGWkXs1DgcnWjl0YGfgTkO5EsOyCYW0IpZuyzI5wzHKlZP5XQVqF0VGd6vPqoCybkJdZ4LO2+DjMYMS0xdKVWS9t7aasDoxOysvU8dqfAmGBxn4dGKhMtn6gUhiUCgabg0pbTB2fpI0FegUC3bpAPJA4MRboDgx84jLTIFbWkOgn+uxlpRB8z+jCqFKVVIcVQDpv71XZBRXHrN7Sb3aGo+ag/K+2HRitpynVJwOC7VX6mpRG2m52/FF+9ZY+TVlez8BkKWoXUAtSvDuj42yyVfqKx6apzFXhP55UP4dDKO4rs2nKim/fO8HuwqBwokKmH2WbnQOtJo8lOy/WmbFUtfOUFevxSeqKYHdTVgqkstiPAdhJYeyF0AP/IG0sZWU3lILB/pbRCfo0JbXUYUMgeAdnKWwKxc9RH5vc7Q8YhJEt7Cpt4Z9cqzu8s2hvpSrffA1ZUUmWwlhbRyEW9tX6gT9B7qYss/P3pqq7eUUVo0UcttcJK5NT+T9bHzoKyd7S476/6Xf+1fiNlNX2DhgVoFcHt2qRxGMKEFNMVyFmZ5X4NSefY6GPCCPWu0HdSUsdtbzeCRAKtuHk3DrrSieNeRsqJELAx954nBlLqVco5G0wzP4s6uxOQzDqbqxSV6yrtkwhbtHPqx97s+BNgr8Fw0x/6yRaZ31RqasLxevqM6zssfcnFPJOGCcg0dHuxxFomLqmUNTjbjQF4ycV0gWxBMNEyuo+camJu3WgqMfdag0xOF75s6KQH4fhQYgTi5OYqgVVEgOAx1U99lVrSLzuOxSym46WYRhRyMqE2eTdJqmsegeZPmVFf65SyBUgGJBXXSlkNYWpuz2D0nkHiT5GX1YV4uV/AcbBL6YQNdmVvz+4ZVB8Xy3smSq6CvF6FozVgE9goC+nm4QppIKCE0VjKmHt1dpRvamvfNyjoKwEe1cVVLFKIepudMs+6s6U1IHCjPkUb5rsPKxXQfprMMz4U1a2lrBAY0Amd6z70PnDFPMTj6txVABUsKYBz0Cw8ZgvZnb+olwWALN+msiMnaugqGBPx8mAxIC8EwQFgL6px14j7XGg1Tf618CN9qtgxP0qTU0Dno0/hmFmt38AwCSiwUIp9wwAAAAASUVORK5CYII=' />  
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.