CSS Filter Generator

Prilagodite učinke, kot so zamegljenje in svetlost, s slaniki ter ustvarite CSS filter kodo s predogledom

Podatki o posodobitvahDodan je CSS Filter Generator - ustvari in nastavi zamegljenje ter svetlostPoglejte posodobitve

Značilnosti

9 vrst učinkov s slaniki

Predogled in CSS koda se spremenita sočasno z vsakim premikom

Preizkusite s svojo sliko

Prikaži svojo sliko v brskalniku in preveri učinke

Izvirnik samo med pritiskom

Neposredno primerjaj sliko pred in po učinku

Fino prilagodi iz 8 vzorcev

Prilagodi vzorce, kot je sepija ali vintage stil

Kako uporabiti

Izberi sliko

Z možnostjo »Izberi svojo sliko« izberi sliko s svojega računalnika. Če je ne izberěš, lahko preizkusiš z vgrajenim vzorcem

Prilagodi učinke

Izberi podoben vzorec ali prilagodi jakost učinka s slaniki

Primerjaj pred in po

Pritisnite »Primerjaj z izvirno sliko« in vidite sliko brez učinka

Kopiraj kodo

Klikni »Kopiraj« in prilepi eno vrstico filter kode v svojo CSS

Primeri uporabe

Berljivost besedila na ozadju

Rahlo zmegljaj ozadje fotografije, da je naslov na vrhu bolj berljiv

Poenotenje barv fotografij

Uskladi fotografije na straneh ekipe ali galerijah v črno-belo ali sepio

Določanje vrednosti s svojo fotografijo

Prilagodi vrednosti izbledelosti ali vintage stila za fotografije, ki jih dejansko uporabljašs

Prilagoditev slike za temni način

Zmanjšaj svetlost in kontrast, da fotografija ne bliči na temnem ozadju

Osnovno znanje

Funkcije in enote filtrov

CSS filter lastnost je lastnost, ki uporabi učinke na videz slike ali elementa. Funkcije, kot sta blur in sepia, se navedejo ločene s presledkom.

px (pikseli)：Funkcija blur nastavlja polmer zamegljenja v px. Če nastavišč 4px, se barve zmeglijo v območju polmera 4 pikslov.
% (odstotek)：Funkciji brightness in sepia nastavljata jakost učinka v %. Pri brightness je 100% prvotna svetlost, 120% pa 20% svetlejše.
deg (stopinje)：Funkcija hue-rotate zavrti barvo na barvnem kolesu v stopinjah. Če nastavišč 180deg, se barva premakne na nasprotno stran barvnega kolesa.

Zakaj se rezultat spremeni glede na vrstni red

Funkcije v filter lastnosti se uporabijo v vrstnem redu od leve proti desni. Naslednji učinek se uporabi na rezultat prejšnjega, zato sprememba vrstnega reda spremeni videz. Na primer, če najprej uporabišč črno-belo, nato sepio, ostanejo rjave barve; če pa uporabišč sepio najprej, nato črno-belo, rjave barve izginejo. To orodje ima fiksni vrstni red, a lahko ustvarjeno CSS kodo uredišč in spremenišč vrstni red.

Razlika med filter in backdrop-filter

Filter in backdrop-filter sta lastnosti, ki uporabljata iste funkcije, a se razlikujeta po tem, kaj se jim uporabi.

filter：Filter je lastnost, ki uporabi učinke na videz samega elementa (slike, besedila ipd.).
backdrop-filter：Backdrop-filter je lastnost, ki uporabi učinke na del ozadja, ki je viden za elementom, in se uporablja za učinke, kot sta zamrzovano steklo.