CSS síugerð

Stilltu áhrif eins og óskerpu og birtu með sleðum og búðu til filter-kóða fyrir CSS með forskoðun

UppfærsluupplýsingarCSS-síugjafi bætt við – stilltu móðun og birtu og búðu til síunaSkoðaðu uppfærslur

Eiginleikar

Níu áhrif með sleðum

Forskoðunin og CSS-kóðinn breytast samtímis í hvert sinn sem þú færir sleðann

Prófaðu með eigin mynd

Birtu mynd úr tækinu þínu í vafranum og skoðaðu áhrifin

Upprunaleg mynd á meðan haldið er inni

Berðu saman fyrir og eftir áhrifin á staðnum

Fínstilling út frá 8 sýnishornum

Stilltu út frá sýnishornum eins og sepia-tón eða vintage

Notkun

Veldu mynd

Veldu mynd úr tækinu þínu með „Velja eigin mynd“. Ef þú velur enga máttu prófa með innbyggðu sýnismyndinni

Stilltu áhrifin

Veldu sýnishorn með svipuðu yfirbragði eða stilltu styrk áhrifanna með hverjum sleða

Berðu saman fyrir og eftir

Myndin án áhrifa birtist aðeins á meðan haldið er inni á „Bera saman við upprunalegu myndina“

Afritaðu kóðann

Límdu filter-línuna inn í þitt eigið CSS með hnappinum „Afrita“

Notkunardæmi

Læsileiki texta á bakgrunnsmynd

Settu smá óskerpu á bakgrunnsmyndina svo fyrirsögnin ofan á verði læsilegri

Samræmdur litatónn mynda

Samræmdu myndir á teymissíðum eða í myndasöfnum í svarthvítt eða sepia

Ákvörðun gilda með eigin myndum

Prófaðu á myndinni sem þú ætlar raunverulega að nota og ákveddu gildi fyrir mattan eða vintage-tón

Myndastilling fyrir dökka stillingu

Ákveddu lækkuð gildi fyrir birtu og birtuskil svo myndin verði ekki of skær á dökkum bakgrunni

Grunnþekking

Föll og einingar í filter

CSS-eiginleikinn filter setur áhrif á útlit myndar eða einingar, og föll eins og blur og sepia eru skrifuð hlið við hlið aðskilin með bili.

px (pixlar)：Fallið blur tilgreinir radíus óskerpunnar í px, og ef 4px er gefið upp renna litirnir saman innan radíuss upp á 4 pixla.
% (prósent)：Föllin brightness og sepia tilgreina styrk áhrifanna í %, og í brightness svarar 100% til upprunalegrar birtu en 120% til 20% meiri birtu.
deg (gráður)：Fallið hue-rotate tilgreinir í deg hversu mikið litnum er snúið á litahringnum, og með 180deg færist liturinn yfir í andstæðan litblæ.

Hvers vegna röðin breytir útkomunni

Föllin sem raðað er upp í filter eru beitt frá vinstri til hægri, og næstu áhrif leggjast ofan á útkomu fyrri áhrifa, svo útlitið getur breyst þegar röðinni er breytt. Til dæmis: ef þú gerir myndina svarthvíta og setur svo sepia á hana verður brúnn blær eftir, en ef þú setur sepia fyrst og gerir hana svo svarthvíta hverfur brúni blærinn. Í þessu tóli er beitingarröðin föst, en þú getur breytt röðinni með því að breyta CSS-kóðanum sem búinn er til.

Munurinn á backdrop-filter

filter og backdrop-filter eru eiginleikar sem nota sömu föllin, en þeir beita áhrifunum á ólíkt viðfang.

filter：filter er eiginleiki sem setur áhrif á útlit einingarinnar sjálfrar sem tilgreind er (mynd, texti og fleira).
backdrop-filter：backdrop-filter er eiginleiki sem setur áhrif á það sem sést að baki tilgreindu einingunni og er notaður fyrir útlit eins og frostað gler.