SVG within CSS | CSS-Tricks
Wow... la propriété CSS Fliter, qui permet d'appliquer des filtres sur un élément (blur, grayscale etc) permet apparemment l'utilisation de filtres SVG inline... le truc de fou.
C'est tricky, pas élégant, un peu sale mais apparemment assez puissant puisqu'on peut même appliquer des filtres de déformation...
img {
filter: url('data:image/svg+xml,
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="waves" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
<feTurbulence type="turbulence" baseFrequency="0.01 0.01" numOctaves="1" seed="1" stitchTiles="noStitch" result="turbulence" />
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="20" xChannelSelector="G" yChannelSelector="A" result="displacementMap" />
</filter>
</svg>#waves')
;
}
✍ Écrire un commentaire
les commentaires relevant du SPAM seront filtrés et dégagés direct...