// NOTAS /* 1) SVG , PNG ,JPG: para una misma imagen, puede pasar que el peso de svg sea mayor que png o jpg; porque dependera de que grafica se lleva a svg, si son figuras simples -> svg pesa poco; pero si son muchas imagenes intrincadas entonces svg terminara pesando mas, ya que jpg y png cuardan bits y svg guarda codigo vectorias. */ /* 2) -webkit-mask-img "solo funciona para firefox" por lo tanto para enmascarar es mejor usar SVG -donde se usara "<image> con width y height obligatorios" y no <img> -aplicar stdDeviation="10" entre 1 y 10 se pasa como que va perdiendo espacio */ /* 3) es mejor mover la mascara modificando cx y cy , sera mas simple. NOTA: las forma de escalar para un mismo tamaño con background-image y <img src=""/> No son iguales. es mejor usar un mismo tipo si quiere sobreponer imagenes parecidas y dar efecto collage */ /* ENMASCARAR CON clipPath esta muy bien, incluso para moverlo con el mousemove es simple; pero "no tiene forma de difuminar los bordes de lamascara con la función gauss" */
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter