CSS szűrőgenerátor

Minden CSS-szűrőgenerátor lehetővé teszi a blur(), a brightness(), a kontraszt() és a többi halmozását – de szinte egyik sem számít a sorrendnek, mert a legtöbb mindig csak egy rögzített sorrendben alkalmazza a szűrőket. Ez más: a szűrőlánc egy valódi, újrarendezhető lista, amely natív HTML5 húzással épül fel, és két funkció újrarendezése valóban megváltoztatja a megjelenített képpontokat, pontosan úgy, mint az éles CSS-ben. Az elhomályosítás, majd az árnyalat elforgatása másképp néz ki, mint az árnyalat elforgatása, majd elmosás, és most már a szállítás előtt láthatja, miért.

Töltsd fel saját fotódat, és a kilenc láncolható funkciót – elmosódás, fényerő, kontraszt, telítettség, árnyalat-elforgatás, szépia, szürkeárnyalatos, invertálás és árnyékvetítés – élőben alkalmazza rá tényleges „szűrő” CSS-deklarációként egy „<img>” elemre, nem pedig szimulált színmintára. Adjon hozzá egy függvényt a kijelölőből, húzza a sorát felfelé vagy lefelé a listában, hogy megváltoztassa a pozícióját a láncban, állítsa be a csúszkát, és az előnézet és a másolható "szűrő: ...;" sor frissül minden bemeneten. Távolítson el egy lépést a saját gombjával, ott a sorban.

Egy második, kisebb lánc létrehoz egy "háttérszűrő" értéket, amelyet az előnézet felett elhelyezett fedőpanelre alkalmaznak, így láthatja a mattüveg hatást – a modern áttetsző navigációs sávok és modális hátterek mögött meghúzódó technikát – anélkül, hogy megérintené az alatta lévő kép saját szűrőláncát. Még a fénykép feltöltése előtt is működik, a színes helyőrző háttér előtt, így másodpercek alatt tárcsázhat egy matt panelt.

Ha az előnézet megfelelőnek tűnik, másolja ki a CSS-t közvetlenül a kimeneti mezőből, vagy exportáljon egy valódi PNG-t: ugyanazt a szűrőkarakterláncot átadja egy Canvas 2D kontextus "ctx.filter" tulajdonságának – amely ugyanazt a szintaxist használja a CSS „filter” tulajdonságaként –, és a vászon letölthető fájllá lesz konvertálva a `().toBlob-val. Az exportált kép pontosan illeszkedik az élő előnézethez, mert ugyanazon a szűrőkarakterláncon keresztül, ugyanazon a renderelési primitíven keresztül jön létre. Minden helyileg történik a böngészőjében; a fényképét soha nem töltik fel sehova.