CSS-filtri generaator
Looge uuesti järjestatav CSS-filtri() ja taustafiltri() funktsioonide kett ning vaadake seda otse oma üleslaaditud fotol kopeeritava CSS-rea ja PNG-ekspordiga.
Tulemus
Iga CSS-filtri generaator võimaldab teil virnastada hägusust (), heledust (), kontrasti () ja muud – kuid peaaegu ükski neist ei lase järjestusel olla oluline, sest enamik rakendab filtreid ainult ühes fikseeritud järjestuses. See on teistsugune: filtriahel on tõeline, ümberjärjestatav loend, mis on koostatud natiivse HTML5 pukseerimisega, ja kahe funktsiooni ümberjärjestamine muudab renderdatud piksleid tõeliselt täpselt samamoodi nagu tootmis-CSS-is. Hägusus-siis-tooni-pööra näeb välja erinevalt toonist-pööra-siis-hägusta ja nüüd näete enne saatmist põhjust.
Laadige üles oma foto ja üheksa aheldatavat funktsiooni – hägusus, heledus, kontrastsus, küllastus, värvipööramine, seepia, halltoonid, ümberpööramine ja varjude langetamine – rakendage sellele reaalajas CSS-i "filtri" deklaratsioonina <img>-elemendil, mitte simuleeritud proovina. Lisage funktsioon valikust, lohistage selle rida loendis üles või alla, et muuta selle asukohta ahelas, reguleerige selle liugurit ning eelvaadet ja kopeeritavat rida "filter: ...;" värskendatakse iga sisendi puhul. Eemaldage samm oma nupuga, sealsamas reas.
Teine, väiksem kett loob taustafiltri väärtuse, mida rakendatakse eelvaate kohal paiknevale ülekattepaneelile, nii et näete mattklaasi efekti – moodsate poolläbipaistvate navigeerimisribade ja modaalse tausta taga olevat tehnikat – ilma, et puudutaksite aluspildi enda filtriahelat. See töötab isegi enne foto üleslaadimist värvilisel kohatäite taustal, nii et saate mõne sekundiga valida jäätunud paneeli kujunduse.
Kui eelvaade tundub õige, kopeerige CSS otse väljundkastist või eksportige päris PNG: sama filtristring antakse Canvas 2D-konteksti atribuudile ctx.filter – mis kasutab CSS-i filtri atribuudina identset süntaksit – ja lõuend teisendatakse allalaaditavaks failiks koos atribuudiga „().toBlob”. Eksporditud pilt ühtib reaalajas eelvaatega täpselt, kuna selle toodab sama filtristring, mis jookseb läbi sama renderdusprimitiivse. Kõik toimub teie brauseris lokaalselt; teie fotot ei laadita kunagi kuhugi üles.
Teie failid ja sisendid ei lahku sellest seadmest kunagi. Töötlemine toimub täiesti võrguühenduseta. 100% turvaline.
Aktsepteeritud vormingud ja reeglid
- Üheksa aheldatavat filtrifunktsiooni – hägusus, heledus, kontrast, küllastus, toonide pööramine, seepia, halltoonid, ümberpööramine ja varjude langetamine – igaühel on oma liugur ja loomulik lohistamise käepide.
- Reaalajas eelvaatepilt koheselt uueneva kopeeritava filtriga: CSS-liin, lisaks väiksem taustadekoratsiooni filtrikett ja demopaneel mattklaasist välimuse jaoks.
- Ühe klõpsuga PNG-eksport renderdab üleslaaditud foto täpselt sama filtristringi kaudu Canvas 2D filtriga ctx.filter, sobitades pikslite jaoks ekraanil kuvatava eelvaate piksli.
Peamised eelised
Kasutusjuhtumid
- • Ahela hägusust, heledust ja värvitooni pöörake tootefotol, seejärel lohistage värvitooni ja pöörake enne hägusust, et näha täpset renderduserinevust enne CSS-iga liitumist.
- • Ehitage mattklaasist navigeerimisriba ülekate taustafiltri ahelaga ja kopeerige valmis taustadekoratsiooni filter ja -veebikomplekti varurida.
- • Eksportige üleslaaditud foto filtreeritud PNG-fail, mis ühtib reaalajas CSS-i eelvaate pikslite kaupa, ilma pilti kunagi serverisse üles laadimata.
Hinda seda tööriista
