Generator filtrov CSS
Zgradite prerazporedljivo verigo funkcij CSS filter() in backdrop-filter() ter si jo v živo oglejte na svoji naloženi fotografiji, s kopirljivo vrstico CSS in izvozom PNG.
🔒 V celoti obdelano v vašem brskalniku – nič, kar tukaj vnesete, ni nikoli naloženo.
Rezultat
Vsak generator filtrov CSS vam omogoča zlaganje blur(), brightness(), contrast() in ostalih – vendar pri skoraj nobenem vrstni red ni pomemben, saj večina filtre uporablja le v enem fiksnem zaporedju. Ta je drugačen: veriga filtrov je resničen, prerazporedljiv seznam, zgrajen z izvornim HTML5 povleci-in-spusti, in prerazporejanje dveh funkcij zares spremeni upodobljene slikovne točke, natanko tako kot v produkcijskem CSS-ju. Blur-nato-hue-rotate je videti drugače kot hue-rotate-nato-blur in zdaj lahko vidite, zakaj, preden kodo objavite.
Naložite svojo fotografijo in devet verižnih funkcij – blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert in drop-shadow – se na njej uporabi v živo kot dejanska deklaracija CSS filter na elementu <img>, ne kot simuliran vzorec. Dodajte funkcijo iz izbirnika, povlecite njeno vrstico gor ali dol po seznamu, da spremenite njen položaj v verigi, prilagodite drsnik in predogled ter kopirljiva vrstica filter: ...; se posodobita ob vsakem vnosu. Odstranite korak z lastnim gumbom, kar tam v vrstici.
Druga, manjša veriga gradi vrednost backdrop-filter, ki se uporabi na prekrivnem panelu, postavljenem čez predogled, tako da lahko vidite učinek motnega stekla – tehniko, na kateri temeljijo sodobne prosojne navigacijske vrstice in ozadja modalnih oken – ne da bi se dotaknili verige filtrov same slike. Deluje še preden naložite fotografijo, proti pisani nadomestni podlagi, tako da lahko dizajn motnega panela nastavite v nekaj sekundah.
Ko je predogled videti pravi, kopirajte CSS neposredno iz izhodnega polja ali izvozite pravi PNG: isti niz filtrov se poda lastnosti ctx.filter konteksta platna Canvas 2D – ki uporablja identično sintakso kot lastnost CSS filter – in platno se pretvori v datoteko za prenos z metodo canvas.toBlob(). Izvožena slika se natančno ujema s predogledom v živo, saj je ustvarjena z istim nizom filtrov, ki teče skozi isti upodobitveni primitiv. Vse se dogaja lokalno v vašem brskalniku; vaša fotografija ni nikoli nikamor naložena.