Generátor CSS filtrov

Upravte efekty ako rozmazanie a jas pomocou posúvačov a generujte kód CSS filter s náhľadom

AktualizáciePridaný generátor CSS filtrov s úpravou rozmazania a jasuZobraziť informácie o aktualizácií

Vlastnosti

9 typov efektov s posúvačom

Náhľad a kód CSS sa menia súčasne s každou úpravou

Skúste so svojou vlastnou fotografiou

Zobrazte fotografiu z počítača v prehliadači a skontrolujte efekt

Pôvodný obrázok iba počas držania

Porovnajte obrázok pred a po aplikácii efektu na mieste

Jemné nastavenie z 8 vzoriek

Upravte počnúc vzorkami ako sépiový tón alebo vintage štýl

Ako používať

Vyberte obrázok

Kliknutím na „Vyberte svoju fotografiu" vyberte obrázok z počítača. Ak nič nevyberete, môžete skúsiť so vstavanými vzorovými obrázkami

Upravte efekt

Vyberte vzorku s podobným náladou alebo upravte intenzitu efektu pomocou posúvačov

Porovnajte pred a po

Kliknutím na tlačidlo „Porovnať s pôvodným obrázkom" sa počas stlačania zobrazí obrázok bez efektu

Skopírujte kód

Kliknutím na tlačidlo „Kopírovať" skopírujte jeden riadok filter do svojho CSS

Prípady použitia

Čitateľnosť textu na pozadí fotografie

Mierne rozostrite fotografiu na pozadí, aby boli nadpisy na nej čitateľnejšie

Zjednotenie farebného tónu fotografií

Zjednoťte fotografie na stránke tímu alebo v galérii v čierno-bielom alebo sépiobom štýle

Určenie hodnôt pre vlastné fotografie

Aplikujte efekt na fotografiu, ktorú skutočne používate, a určite hodnoty pre matný alebo vintage štýl

Nastavenie obrázka pre tmavý režim

Určite hodnoty s nižším jasom a kontrastom, aby obrázky neboli príliš jasné na tmavom pozadí

Základné poznatky

Funkcie a jednotky filter

Vlastnosť CSS filter aplikuje efekty na vzhľad obrázka alebo prvku. Funkcie ako blur a sepia sa píšu oddelené medzerou.

px (pixely)：Funkcia blur určuje polomer rozmazania v pixeloch. Ak zadáte 4px, farby sa zmiešajú v rozsahu polomeru 4 pixelov.
% (percento)：Funkcie brightness a sepia určujú intenzitu efektu v percentách. V funkcii brightness je 100% pôvodný jas a 120% znamená o 20% svetlejšie.
deg (stupne)：Funkcia hue-rotate určuje uhol otočenia farby na farebnom kruhu v stupňoch. Ak zadáte 180deg, farba sa zmení na opačnú farbu na farebnom kruhu.

Prečo sa výsledok mení podľa poradia zápisu

Funkcie v filter sa aplikujú zľava doprava, pričom nasledujúci efekt sa aplikuje na výsledok predchádzajúceho efektu. Zmena poradia tak môže zmeniť vzhľad. Napríklad aplikácia sépia po čierno-bielej zanecháva hnedý nádych, zatiaľ čo aplikácia čierno-bielej po sépii nádych odstráni. Tento nástroj má pevné poradie aplikácie, ale poradie môžete zmeniť úpravou generovaného CSS kódu.

Rozdiel medzi filter a backdrop-filter

Filter a backdrop-filter sú vlastnosti, ktoré používajú rovnaké funkcie, ale efekt sa aplikuje na iný cieľ.

filter：Filter aplikuje efekt na vzhľad samotného prvku (ako sú obrázky alebo text).
backdrop-filter：Backdrop-filter aplikuje efekt na časť viditeľnú za prvkom a používa sa na vytvorenie efektu zmatneného skla.