Preskoči na vsebino
TextArray1.87.0
100% lokalno

CSS filter generator

Ustvari CSS filter ali backdrop-filter deklaracijo iz vizualnih kontrol.

Izhod
Povezana orodja
Generator CSS sence kvadratkaOrodja za razvijalce
Generator gradientov CSSOrodja za razvijalce
Generator glasmorfizma CSSnovoOrodja za razvijalce
i18n tipka difOrodja za razvijalce
Pretvornik TOML v JSONOrodja za razvijalce
SQL v JSONOrodja za razvijalce
CSS filter generator
To orodje gradi pripravljen-za-kopiranje CSS filter (ali backdrop-filter) deklaracijo iz nabora vizualnih kontrol, tako da ne morate zapomniti sintakso kombiniranja razmaznanja, svetlosti, kontrasta, grayscalea, rotacije odtenka, invertiranja, prosojnosti, zasičenja, sepia in drop-shadow-a v eno lastnost. Namenjeno je vsakomur, ki stilizira galerijo fotografij, učinek lebdenja, steklasti panel ali tematsko obdelavo slike, ne da bi moral ročno pisati seznam funkcij filtra.
Vsaka funkcija ima svoje polje, ustvarjena vrednost pa navaja samo tiste, ki ste jih dejansko spremenili — tako da stran le z majhnim razmazanjem ostane kratka namesto da navaja devet neuporabljenih funkcij. Polje vrstnega reda funkcij kontrolira vrstni red izvajanja, ker CSS filtri delujejo od leve proti desni in preureditev (razmaznanje pred ali po prilagajanju kontrasta, na primer) lahko spremeni vizualni rezultat. Dve privzeti nastavki, vintage in črno in belo, nastavita celotno skupino vrednosti naenkrat za skupen videz. Preklopite "backdrop-filter" za filtriranje tega, kar je vidno za elementom namesto samega elementa — standardna izbira za steklaste panele — in spremenite obliko rezultata, da dobite Tailwind razred s poljubno vrednostjo namesto navadne CSS vrstice.
Numeričnim poljem so samodejno postavljene razumne omejitve, tako da slučajna ogromna ali negativna vrednost nikoli ne prekine rezultata; polje barve drop shadow sprejema katero koli vrednost CSS barve. Rezultat se posodablja v živo, ko prilagajate katero koli možnost, rezultat pa zgoraj šteje, koliko je funkcij dejansko aktivnih.
Vse se izvaja lokalno v vašem brskalniku — nič tega, kar vnesete tukaj, se ne prenaša ali pošilja nikamor. Kopirajte rezultat, ga prenesite kot .txt datoteko ali ga pošljite vnosu drugega orodja, da nadaljujete s predelavo.
FAQ
Kakšna je razlika med filter in backdrop-filter?
`filter` se nanaša na sam element in vse, kar je narisano v njem; `backdrop-filter` se nanaša na tisto, kar je vidno za elementom, kar je tisto, kar ustvari učinek stekla za ozadjem.
Zakaj je vrstni red funkcij filtra pomemben?
CSS uporablja funkcije filtra od leve proti desni, vsaka deluje na rezultat prejšnje. Razmaznanje pred prilagajanjem kontrasta je lahko videti drugače kot prilagajanje kontrasta prej, zato lahko preureditev spremeni končni videz tudi z istimi vrednostmi.
Kaj spremenita vintage in črno in belo privzeti nastavki?
Vintage nastavlja toplo mešanico sepia, zasičenja, kontrasta, svetlosti in rahle rotacije odtenka; črno in belo nastavlja grayscale na 100% z majhnim povečanjem kontrasta. Kateri koli privzeti nastavek preglasi posamezne drsne na levi, medtem ko je izbran.
Ali lahko ustvarjeni CSS uporabim s Tailwindom?
Da. Spremenite obliko rezultata na "Tailwind razred" in orodje ovije isto deklaracijo v Tailwindovo sintakso poljubne lastnosti, npr. `[filter:blur(4px)_grayscale(50%)]`, tako da ga lahko neposredno spustite v atribut `class`.
Ali je moj vnos prenesen nekam?
Ne. Filter se ustvari v celoti v vašem brskalniku iz možnosti, ki ste jih nastavili — nič se ne pošlje na strežnik.