CSS szűrőkészítő
Építs átrendezhető láncot CSS filter() és backdrop-filter() függvényekből, és nézd meg élőben a saját feltöltött fotódon – másolható CSS-sorral és PNG exporttal együtt.
🔒 Teljesen a böngészőjében dolgozzák fel – soha semmi, amit itt beírt, nem kerül feltöltésre.
Eredmény
A legtöbb CSS-filter generátor engedi ugyan egymásra halmozni a blur(), brightness(), contrast() és a többi függvényt, de szinte egyiküknél sem számít a sorrend, mert általában csak egyetlen rögzített sorrendben alkalmazzák a szűrőket. Ez itt más: a szűrőlánc egy valódi, átrendezhető lista, amely natív HTML5 drag-and-drop segítségével működik, és két függvény sorrendjének megcserélése valóban más végső képpontokat eredményez, pontosan úgy, ahogy az éles CSS-ben is történne. A homályosítás-után-színforgatás máshogy néz ki, mint a színforgatás-után-homályosítás, és most már láthatod is a különbséget, mielőtt kiadnád a kódot.
Töltsd fel a saját fotódat, és a kilenc láncolható függvény – blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert és drop-shadow – valódi `filter` CSS-deklarációként, egy `<img>` elemen alkalmazva jelenik meg rajta élőben, nem pedig szimulált színmintán. Válassz ki egy függvényt a legördülőből, húzd a sorát feljebb vagy lejjebb a listában, hogy megváltoztasd a pozícióját a láncban, állítsd a csúszkáját, és minden egyes módosításra frissül az előnézet és a másolható `filter: ...;` sor is. Egy lépést a sorban lévő saját gombjával távolíthatsz el.
Egy második, kisebb lánc egy `backdrop-filter` értéket épít fel, amelyet egy az előnézet fölé helyezett átfedő panelre alkalmaz a rendszer, így láthatod a mattüveg-hatást – azt a technikát, ami a modern áttetsző navigációs sávok és modális hátterek mögött áll – anélkül, hogy az alatta lévő kép saját szűrőlánca megváltozna. Még fotó feltöltése előtt is működik, a színes helyőrző háttéren, így másodpercek alatt beállíthatsz egy mattüveg-panelt.
Ha az előnézet megfelelő, másold ki a CSS-t közvetlenül a kimeneti mezőből, vagy exportálj valódi PNG-t: ugyanaz a szűrősztring kerül át egy Canvas 2D kontextus `ctx.filter` tulajdonságába – amely azonos szintaxist használ a CSS `filter` tulajdonsággal –, és a vászon a `canvas.toBlob()` segítségével letölthető fájllá alakul. Az exportált kép pontosan megegyezik az élő előnézettel, mert ugyanaz a szűrősztring ugyanazon a renderelési alapon fut. Minden a böngésződben, helyben történik; a fotód soha nem kerül feltöltésre sehova.