Pagina principala » Setul de instrumente » Philter.js - Biblioteca gratuită de modificare a imaginilor utilizând filtrele CSS

    Philter.js - Biblioteca gratuită de modificare a imaginilor utilizând filtrele CSS

    Instagram este cunoscută ca cea mai populară rețea de fotografii. Acesta gestionează peste 52 de milioane de fotografii pe zi, iar multe dintre ele include filtre care alterează imaginile în zbor.

    Acest lucru este posibil, de asemenea, folosind filtre CSS care aplicați direct în browser. Aceste proprietăți personalizate ale filtrelor au sprijin larg în multe browsere și arată foarte bine.

    Cu Plugin Plugin JavaScript, puteți scala acest proces pentru a economisi timp și a vă muta codul în HTML pentru efecte de filtrare dinamice.

    Folosind acest plugin, câștigi control mult mai mare asupra imaginilor. Astfel puteți alege filtrele pe care doriți să le aplicați imaginilor individuale și dacă anumite filtre ar trebui să se schimbe pe baza comportamentului utilizatorului, cum ar fi deplasarea cu mouse-ul.

    CSS sprijină tranzițiile animate și Philter face acest proces foarte simplu. Descărcați doar Philter din pagina de pornire sau din repo GitHub. Odată ce este adăugat la pagina dvs. web, pur și simplu adăugați codul de inițializare și lăsați-o să plece.

    Iată a fragment de încercare din repo GitHub:

      

    În mod implicit, poți configurați tranzițiile și atributele de date suplimentare pe care le puteți adăuga în HTML. URL-ul parametru definește calea în care Philter ar trebui să caute fișiere SVG personalizate folosite în procesul de filtrare.

    Aceste filtre suplimentare sunt împachetat cu biblioteca, astfel încât nu este nevoie să le editați deloc. Dar, le puteți muta în jurul lor sau le puteți plasa într-o altă structură de directoare din fișierul dvs. curent, deci această setare poate fi necesar să fie modificată.

    Acum, puteți doar adăugați filtre personalizate dreptul la HTML elemente sau recipientele acestora.

    Iată a un exemplu simplu:

     

    Puteți găsi a lista completă a tuturor filtrelor pe GitHub, împreună cu a ghid complet de instalare și multe alte mostre de cod.

    Philter este unul dintre cele mai cool plug-in-uri gratuite și împinge limitele CSS moderne. Puteți chiar proiectați propriile filtre dacă ești dispus să sapi în codul de bază și să te distrezi.

    Pentru un loc simplu pentru a începe, trebuie doar să vizitați pagina de pornire a lui Philter și să descărcați o copie. Aveți posibilitatea să-l în sus și să fie difuzate în cel mai scurt timp.