Generator de filtre CSS

Fiecare generator de filtre CSS vă permite să stivuiți blur(), luminozitate(), contrast() și restul - dar aproape niciunul dintre ele nu lasă ordinea să conteze, deoarece majoritatea aplică filtre doar într-o secvență fixă. Acesta este diferit: lanțul de filtre este o listă reală, reordonabilă, construită cu HTML5 nativ drag-and-drop, iar reordonarea a două funcții schimbă cu adevărat pixelii randați, exact așa cum ar fi în CSS de producție. Blur-then-hue-rotate arată diferit de hue-rotate-then-blur, iar acum puteți vedea de ce înainte de a-l expedia.

Încărcați propria fotografie și cele nouă funcții care pot fi înlănțuite — estompare, luminozitate, contrast, saturare, rotire de nuanță, sepia, tonuri de gri, inversare și umbră interioară — aplicați-i în direct ca declarație CSS „filtru” reală pe un element „<img>”, nu un eșantion simulat. Adăugați o funcție din selectare, trageți rândul acesteia în sus sau în jos pe listă pentru a-și schimba poziția în lanț, ajustați-i glisorul, iar previzualizarea și actualizarea liniei „filtrul: ...;” copiabil la fiecare intrare. Eliminați un pas cu propriul buton, chiar acolo, în rând.

Un al doilea lanț mai mic creează o valoare „filtru de fundal” aplicată unui panou de suprapunere poziționat deasupra previzualizării, astfel încât să puteți vedea efectul de sticlă mată — tehnica din spatele barelor moderne de navigare translucide și a fundalurilor modale — fără a atinge lanțul de filtre al imaginii subiacente. Funcționează chiar înainte de a încărca o fotografie, pe fundalul de substituent colorat, astfel încât să puteți forma un design de panou matat în câteva secunde.

Când previzualizarea arată corect, copiați CSS-ul direct din caseta de ieșire sau exportați un PNG real: același șir de filtru este transmis proprietății `ctx.filter` a unui context Canvas 2D — care utilizează sintaxă identică ca proprietatea `filter` CSS — iar pânza este convertită într-un fișier descărcabil cu `canvas.toBlob()`. Imaginea exportată se potrivește exact cu previzualizarea live, deoarece este produsă de același șir de filtru care trece prin aceeași primitivă de randare. Totul se întâmplă local în browserul tău; fotografia ta nu este încărcată niciodată nicăieri.