Página principal » Caja de herramientas » Philter.js - Biblioteca gratuita de alteración de la imagen mediante filtros CSS

    Philter.js - Biblioteca gratuita de alteración de la imagen mediante filtros CSS

    Instagram Es ampliamente conocida como la red de fotos más popular. Maneja más de 52 millones de fotos por día y muchas de ellas. incluir filtros que alteran las imágenes sobre la marcha.

    Esto también es posible usando filtros CSS que aplicar directamente en el navegador. Estas propiedades de filtro personalizadas tienen un amplio soporte en muchos navegadores y se ven geniales.

    Con el Philter JavaScript plugin, puede escalar este proceso para ahorrar tiempo y mover su código a HTML para efectos de filtro dinámicos.

    Al usar este plugin, ganas Mucho mayor control sobre tus imágenes.. De esta manera, puede elegir qué filtros desea aplicar a las imágenes individuales y si ciertos filtros deberían cambiar en función del comportamiento del usuario, como el desplazamiento del mouse..

    CSS soporta transiciones animadas y Philter hace que este proceso sea realmente simple. Simplemente descargue Philter desde la página de inicio o desde el repositorio de GitHub. Una vez que se agrega a tu página web, simplemente añadir el código de inicialización y dejalo ir.

    Aquí está un fragmento de muestra desde el repositorio de GitHub:

      

    Por defecto, puedes configurar transiciones y atributos de datos adicionales que puedes adjuntar en HTML. los url parámetro define la ruta donde Philter debe buscar archivos SVG personalizados utilizados en el proceso de filtrado.

    Estos filtros extra son empaquetado con la biblioteca, por lo que no es necesario editarlos en absoluto. Sin embargo, puede moverlos o colocarlos en una estructura de directorio diferente de su archivo actual, por lo que esta configuración puede necesitar ser alterado.

    Ahora, usted puede simplemente agregar filtros personalizados derecho a su HTML Elementos o sus contenedores..

    Aquí está un ejemplo simple:

     

    Puedes encontrar un lista completa de todos los filtros en GitHub, junto con un guía de configuración completa y muchos otros ejemplos de código.

    Philter es uno de los complementos gratuitos más geniales del mundo y supera los límites de la CSS moderna. Usted puede incluso diseña tus propios filtros Si estás dispuesto a profundizar en la base de código y jugar un poco.

    Para un lugar sencillo para comenzar, simplemente visite la página de inicio de Philter y descargue una copia. Puedes tenerlo listo y funcionando en ningún momento.