Generator CSS filtera

Svaki CSS generator filtara omogućuje slaganje blur(), brightness(), kontrast() i ostalo — ali gotovo nijedan od njih ne dopušta da je redoslijed bitan, jer većina filtara primjenjuje samo u jednom fiksnom nizu. Ovaj je drugačiji: lanac filtara stvaran je popis koji se može mijenjati redoslijedom i napravljen je izvornim HTML5 povlačenjem i ispuštanjem, a mijenjanje redoslijeda dviju funkcija istinski mijenja prikazane piksele, točno onako kako bi to bilo u proizvodnom CSS-u. Blur-then-hue-rotate izgleda drugačije od hue-rotate-then-blur, a sada možete vidjeti zašto prije nego što ga pošaljete.

Učitajte vlastitu fotografiju i devet funkcija koje se mogu ulančati — zamućenje, svjetlina, kontrast, zasićenje, rotiranje nijanse, sepija, sive nijanse, invertiranje i sjena — primijenite uživo na nju kao stvarnu CSS deklaraciju `filtera` na element `<img>``, a ne simulirani uzorak. Dodajte funkciju iz odabira, povucite njen redak gore ili dolje po popisu da biste promijenili njen položaj u lancu, prilagodite njen klizač, a pregled i kopirani redak `filtar: ...;` ažuriraju se pri svakom unosu. Uklonite korak s vlastitim gumbom, tamo u redu.

Drugi, manji lanac gradi vrijednost `pozadinskog filtra` koja se primjenjuje na preklapajuću ploču postavljenu iznad pregleda, tako da možete vidjeti efekt mat stakla — tehniku iza modernih prozirnih navigacijskih traka i modalnih pozadina — bez dodirivanja vlastitog lanca filtara temeljne slike. Radi čak i prije nego što učitate fotografiju, na šarenoj pozadini rezerviranog mjesta, tako da možete izabrati matirani dizajn ploče u nekoliko sekundi.

Kada pregled izgleda dobro, kopirajte CSS izravno iz izlaznog okvira ili izvezite pravi PNG: isti filtarski niz predaje se svojstvu `ctx.filter` Canvas 2D konteksta — koje koristi identičnu sintaksu kao i svojstvo CSS `filter` — a platno se pretvara u datoteku za preuzimanje pomoću `canvas.toBlob()`. Izvezena slika točno odgovara pretpregledu uživo jer je proizvedena istim nizom filtera koji prolazi kroz istu primitivu renderiranja. Sve se događa lokalno u vašem pregledniku; tvoja fotografija nikad nigdje nije postavljena.