Početna » alat » Philter.js - Knjižnica za besplatnu izmjenu slika pomoću CSS filtara

    Philter.js - Knjižnica za besplatnu izmjenu slika pomoću CSS filtara

    Instagram nadaleko je poznat kao najpopularnija mreža za fotografije. Ona obrađuje više od 52 milijuna fotografija dnevno i mnoge od njih uključuju filtre koje mijenjaju slike u letu.

    To je također moguće pomoću CSS filtera koji primjenjuju se izravno u pregledniku. Ta svojstva prilagođenog filtra imaju široku podršku u mnogim preglednicima i izgledaju sjajno.

    Sa Filter JavaScript čep, možete proširiti taj proces kako biste uštedjeli vrijeme i premjestili kod u HTML za efekti dinamičkog filtra.

    Koristeći ovaj dodatak, dobit ćete mnogo veću kontrolu nad svojim slikama. Na taj način možete odabrati koje filtre želite primijeniti na pojedinačne slike i ako bi se određeni filtri trebali mijenjati na temelju ponašanja korisnika, kao što je lebdenje.

    CSS podržava animirane prijelaze i Philter čini ovaj proces vrlo jednostavnim. Vi samo skinuti Philter s početne stranice ili iz GitHub repo. Kada se doda na vašu web-stranicu, vi samo dodajte inicijalizacijski kod i pusti ga.

    Evo jednog isječak uzorka iz repozitorija GitHub:

      

    Prema zadanim postavkama možete postavite prijelaze i dodatne atribute podataka koje možete dodati u HTML. uRL parametar definira put kojim bi Philter trebao tražiti prilagođene SVG datoteke korištene u procesu filtriranja.

    Ovi dodatni filtri su u paketu s knjižnicom, tako da ih uopće ne morate uređivati. No, možete ih premjestiti ili ih smjestiti u drugu strukturu direktorija iz trenutne datoteke, tako da je ova postavka možda će biti potrebno izmijeniti.

    Sada, možete samo dodajte prilagođene filtre pravo na HTML elementi ili njihovi spremnici.

    Evo jednog jednostavan primjer:

     

    Možete pronaći a cijeli popis svih filtara na GitHub, zajedno s kompletan vodič za postavljanje i mnoge druge uzorke koda.

    Philter je jedan od najboljih besplatnih dodataka i pomiče granice modernog CSS-a. Možete čak i osmislite vlastite filtre ako ste voljni kopati u bazu kodova i promatrati.

    Za jednostavno mjesto za početak, posjetite Philter početnu stranicu i preuzmite kopiju. Možete ga pokrenuti i pokrenuti u tren oka.