CSS генератор филтера

Сваки CSS генератор филтера вам омогућава да наслагате blur(), brightness(), contrast() и остале — али готово ниједан не допушта да редослед буде битан, јер већина примењује филтере само у једном фиксном низу. Овај је другачији: ланац филтера је прави списак који можете да преуређујете помоћу уграђеног HTML5 drag & drop, и промена редоследа две функције заиста мења изрендероване пикселе, тачно као у продукцијском CSS-у. blur-па-hue-rotate изгледа другачије од hue-rotate-па-blur, и сада можете да видите зашто пре него што пошаљете код.

Отпремите своју фотографију и девет ланачких функција — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert и drop-shadow — примењују се на њу уживо као стварна CSS декларација filter на елементу <img>, а не симулирани узорак. Додајте функцију из падајуће листе, превуците њен ред горе-доле да бисте променили позицију у ланцу, подесите клизач, и преглед и линија filter: ...; за копирање се ажурирају при сваком уносу. Уклоните корак помоћу сопственог дугмета, управо ту у реду.

Други, мањи ланац гради вредност backdrop-filter која се примењује на преклопни панел постављен преко прегледа, тако да можете видети ефекат матираног стакла — технику иза модерних провидних навигационих трака и позадина модала — без дирања сопственог ланца филтера основне слике. Функционише и пре него што отпремите фотографију, на шареној позадини чувара места, па можете да уобличите дизајн матираног панела за неколико секунди.

Када преглед изгледа како треба, копирајте CSS директно из излазног поља или извезите прави PNG: исти низ филтера се прослеђује својству ctx.filter Canvas 2D контекста — које користи идентичну синтаксу као CSS својство filter — и платно се претвара у преузимљиву датотеку помоћу canvas.toBlob(). Извезена слика се тачно подудара са живим прегледом, јер настаје применом истог низа филтера кроз исту примитиву за рендеровање. Све се одвија локално у вашем прегледачу; ваша фотографија се никада нигде не отпрема.