⭐ 0
🔍
Besedilo Slika PDF in dokumenti Avdio Glasba elektronika Čas Pripomočki Validatorji Ezoterika igre

Generator filtrov CSS

Zgradite verigo funkcij CSS filter() in backdrop-filter(), ki jo je mogoče preurediti, in jo predoglejte v živo na lastni naloženi fotografiji z vrstico CSS, ki jo je mogoče kopirati, in izvozom PNG.

🖼️

Povleci in spusti sliko sem

ali Kliknite za brskanje po datotekah

Naložite zgornjo fotografijo za predogled verige filtrov tukaj. Predstavitev filtra za ozadje iz matiranega stekla deluje tudi brez njega.

Obdelava ... 0%

Rezultat

Vsak generator filtrov CSS vam omogoča zlaganje zamegljenosti(), svetlosti(), kontrasta() in ostalih — vendar skoraj noben od njih ne pusti, da bi bil vrstni red pomemben, ker večina uporablja filtre le v enem fiksnem zaporedju. Ta je drugačen: veriga filtrov je resničen seznam, ki ga je mogoče preurediti, zgrajen z izvirnim HTML5 povleci in spusti, prerazporeditev dveh funkcij pa resnično spremeni upodobljene slikovne pike, natanko tako, kot bi v produkcijskem CSS. Blur-then-hue-rotate je videti drugače kot hue-rotate-then-blur, in zdaj lahko vidite, zakaj, preden ga pošljete.

Naložite svojo fotografijo in devet funkcij, ki jih je mogoče verižiti – zameglitev, svetlost, kontrast, nasičenost, vrtenje odtenkov, sepija, sivine, obračanje in senca – v živo uporabite zanjo kot dejansko deklaracijo CSS `filtra` na elementu `<img>``, ne kot simulirani vzorec. Dodajte funkcijo iz izbire, povlecite njeno vrstico navzgor ali navzdol po seznamu, da spremenite njen položaj v verigi, prilagodite njen drsnik ter predogled in kopirano vrstico `filter: ...;` posodobite ob vsakem vnosu. Odstranite korak z lastnim gumbom, tam v vrsti.

Druga, manjša veriga ustvari vrednost `backdrop-filter`, ki se uporablja za prekrivno ploščo, postavljeno nad predogled, tako da lahko vidite učinek motnega stekla – tehniko za sodobnimi prosojnimi navigacijskimi vrsticami in modalnimi ozadji –, ne da bi se dotaknili lastne verige filtrov osnovne slike. Deluje, še preden naložite fotografijo, na barvitem ozadju nadomestnega mesta, tako da lahko v nekaj sekundah izberete zasnovo matiranega panela.

Ko je predogled videti pravilen, kopirajte CSS naravnost iz izhodnega polja ali izvozite pravi PNG: isti filtrirni niz je predan lastnosti `ctx.filter` konteksta Canvas 2D — ki uporablja enako sintakso kot lastnost `filter` CSS — in platno se pretvori v datoteko, ki jo je mogoče prenesti z `canvas.toBlob()`. Izvožena slika se natančno ujema s predogledom v živo, ker jo ustvari isti filtrirni niz, ki teče skozi isti primitiv upodabljanja. Vse se zgodi lokalno v vašem brskalniku; vaša fotografija ni nikoli nikamor naložena.

🛡️
Izvedeno v brskalniku

Vaše datoteke in vnosi nikoli ne zapustijo te naprave. Obdelava poteka popolnoma brez povezave. 100 % varno.

Sprejeti formati in pravila

  • Devet verižnih funkcij filtra – zamegljenost, svetlost, kontrast, nasičenost, vrtenje barvnih odtenkov, sepija, sivine, obračanje in senca – vsaka s svojim drsnikom in ročajem za vlečenje.
  • Slika za predogled v živo s filtrom, ki ga je mogoče takoj posodabljati: vrstica CSS ter manjša veriga filtrov za ozadje in predstavitvena plošča za videz motnega stekla.
  • Izvoz PNG z enim klikom upodablja naloženo fotografijo skozi popolnoma enak niz filtrov s ctx.filter Canvas 2D, ki se ujema s slikovno piko predogleda na zaslonu.

Ključne prednosti

✓ Preurejanje povleci in spusti je resnično: premikanje filtra prej ali pozneje v verigi resnično spremeni upodobljeni rezultat, ki vam ga generatorji fiksnega vrstnega reda ne morejo prikazati.
✓ Predogled v živo se izvaja na vaši naloženi fotografiji namesto na splošnem vzorcu, tako da natančno vidite, kako se veriga filtrov obnaša na resnični vsebini, preden pošljete CSS.
✓ Ločena veriga filtrov za ozadje prikazuje učinek motnega stekla na prekrivni plošči, izvoz PNG pa zapeče isti niz filtrov v sliko, ki jo je mogoče prenesti prek Canvas 2D.

Primeri uporabe

  • • Verižna zamegljenost, svetlost in zasukanje odtenkov na fotografiji izdelka, nato povlecite zasukanje odtenkov pred zameglitvijo, da vidite natančno razliko v upodabljanju, preden se zavežete CSS.
  • • Ustvarite prekrivno vrstico za krmarjenje iz matiranega stekla z verigo filtrov ozadja in kopirajte pripravljeno vrstico filtra ozadja plus -webkit-.
  • • Izvozite filtriran PNG naložene fotografije, ki se ujema s predogledom v živo CSS slikovno piko za slikovno piko, ne da bi sliko naložili na strežnik.