Generátor CSS filtrů

Upravte efekty jako rozostření a jas pomocí posuvníků a generujte CSS filter kód s náhledem

Informace o aktualizacíchPřidán generátor CSS filtrů, vygenerujte úpravou rozostření a jasuZobrazit aktualizace

Vlastnosti

9 efektů na posuvnících

Náhled a CSS kód se mění současně při každém pohybu

Vyzkoušejte si svůj vlastní obrázek

Zobrazte místní obrázek v prohlížeči a potvrďte efekt

Původní obrázek pouze během stisknutí

Porovnávejte obrázek před a po použití efektu na místě

Jemná úprava z 8 vzorků

Začněte se vzorkem (sépie, vintage atd.) a jemně ho upravujte

Jak na to

Vyberte obrázek

Pomocí "Vyberte si svůj obrázek" určete místní obrázek. Pokud nevyberete nic, můžete vyzkoušet vestavěný vzorový obrázek

Upravte efekt

Vyberte si vzor s podobnou atmosférou nebo upravujte intenzitu efektu pomocí jednotlivých posuvníků

Porovnávejte před a po

Stisknutím tlačítka "Porovnat s původním obrázkem" zobrazíte obrázek bez efektu

Zkopírujte kód

Tlačítkem "Kopírovat" zkopírujte jeden řádek filtru do svého CSS

Případy použití

Čitelnost textu na pozadí fotografií

Lehce rozostřete fotografii pozadí a zlepšete čitelnost nadpisu umístěného na vrchu

Sjednocení barevného tónu fotografií

Harmonizujte fotografie na stránce týmu nebo galerii v černobílé nebo sépii

Určení hodnot vlastních fotografií

Použijte skutečné fotografie, které budete používat, a určete hodnoty pro efekt ztmavení nebo vintážu

Úprava obrázků pro tmavý režim

Určete hodnoty se sníženou jasem a kontrastem tak, aby obrázky neoslňovaly tmavé pozadí

Základní znalosti

Funkce a jednotky filtru

Vlastnost CSS filter aplikuje efekty na vzhled obrázků nebo prvků a je psána jako funkce oddělená mezerou (blur, sepia atd.).

px (pixely)：Funkce blur určuje poloměr rozostření v px. Pokud zadáte 4px, barvy se sjednocují v rozsahu poloměru 4 pixelů.
% (procenta)：Funkce brightness a sepia určují intenzitu efektu v procentech. U brightness 100 % znamená původní jas a 120 % znamená zvýšení o 20 %.
deg (stupně)：Funkce hue-rotate určuje úhel natočení barvy na barevném kole v deg. Úhel 180 deg přesune barvu na opačnou stranu barevného kola.

Proč se výsledek mění podle pořadí zápisu

Funkce v filter se aplikují zleva doprava, přičemž následující efekt se aplikuje na výsledek předchozího efektu. Změna pořadí tak může ovlivnit vzhled. Například aplikování sépie na černobílou fotku ponechá hnědý nádech, zatímco aplikování černobílé na sépii nádech odstraní. Tento nástroj má pevné pořadí aplikace, ale můžete pořadí změnit úpravou generovaného CSS kódu.

Rozdíl od backdrop-filter

Filter a backdrop-filter používají stejné funkce, ale liší se tím, na co se efekt aplikuje.

filter：Filter je vlastnost, která aplikuje efekt na vzhled samotného prvku (obrázky, text atd.).
backdrop-filter：Backdrop-filter je vlastnost, která aplikuje efekt na část viditelnou za prvkem, používá se pro efekt matného skla.