Fildrop nueva version de SVG Filters

Archivado en: SVG Filters Gulp

Después de unas cuantas semanas trabajando en la nueva versión de SVG-Filter ya por fin esta disponible.

Además de cambiar el nombre a Fildrop. En esta nueva version he añadido la posibilidad de modificar en tiempo real los valores de algunos filtros a través de diferentes sliders. Todos aquellos filtros en los que el botón tiene un icono con forma de rueda pueden ser modificados y ver los efectos al instante sobre la fotografía que hace de ejemplo o sobre la fotografía que hayas subido mediante la opción de drag&drop.

En esta version además de modificar los valores de los filtros también puedes copiar al portapapeles el código del filtro con los valores modificados. Así puedes llevartelo donde quieras.

También puedes descargarte el CSS y SVG para poder usarlo donde quieras. Lo que tienes que hacer es añadir el archivo filters.css a tu proyecto

<link rel="stylesheet" href="path/to/filter.css">

También tienes que añadir el archivo filters.svga tu proyecto dependiendo de su ubicación deberás modificar la ruta de los filtros en el CSS.

.saturate {
    -webkit-filter: url("tu/ruta/filters.svg##saturate");
            filter: url("tu/ruta/filters.svg##saturate");
}

Otra opción es pegar directamente todo el código de filters.svg en tu HTML y así no tener que modificar el archivo CSS. Mucho cuidado que a Firefox este método no le gusta.

Muchas gracias a Lionel y Kseso por el feedback :)

SCALABLE, un libro sobre SVGA lo largo de 15 capítulos, 120 páginas y más de 70 ejemplos vamos a ver todo lo que podemos hacer con SVG. Tu pones el precio, disponible desde 0$ para descargar desde LeanPub(PDF, ePUB y MOBI).