CSS filtro generatorius

Nustatykite efektus, pvz., sulėtinimą ar ryškumą, slankikliais ir peržiūrėkite CSS filter kodą realiuoju laiku

Naujinimų informacijaCSS filtro generatorius pridėtas – sukurkite su neryškumu ir šviesumuPeržiūrėti atnaujinimus

Savybės

9 rūšių efektai su slankikliais

Slankiklyje judindami, peržiūra ir CSS kodas keičiasi vienu metu

Testuokite su savo vaizdu

Rodyti jūsų vaizdą naršyklėje ir patikrinti efektus

Pradinį vaizdą matyti spaudžiant

Palyginkite vaizdą prieš ir po efekto toje pačioje vietoje

Tikslinkite iš 8 šablonų

Pradėkite nuo šablono (pvz., sepia ar vintage) ir tiksliai nustatykite

Kaip naudoti

Pasirinkite vaizdą

Naudodami „Pasirinkite savo vaizdą", nurodykite savo failą. Jei nepasirinksite, galite testuoti iš tos vietos naudojant integruotą šablono vaizdą

Nustatykite efektus

Pasirinkite panašų šabloną arba slankikliais nustatykite efekto intensyvumą

Palyginkite prieš ir po

Spaudydami „Palyginti su originalu", rodomas originalus vaizdas be efekto

Nukopijuokite kodą

Naudodami „Kopijuoti" mygtuką nukopijuokite filter eilutę į savo CSS

Naudojimo atvejai

Teksto skaitomumas ant fono nuotraukos

Šiek tiek sulėtinkite fono nuotrauką, kad viršuje esanti antraštė būtų lengviau skaitoma

Nuotraukų spalvų derinio suvienodinimas

Komandos puslapyje arba galerijoje padarykite visas nuotraukas juodai baltas arba sepia spalvos

Faktinės nuotraukos parametrų nustatymas

Taikykite faktinę nuotrauką ir nustatykite šiurkščios arba vintage tonavimo parametrus

Vaizdų nustatymas tamsiai temai

Sumažinkite ryškumą ir kontrastą, kad vaizd nepapiktų tamsaus fono atžvilgiu

Pagrindinės žinios

Filter funkcijos ir vienetai

CSS filter yavybė taikyti vaizdo arba elemento efektus. Funkcijos, kaip blur ir sepia, rašomos atskirtos tarpais.

px (pikseliai)：Blur funkcija nustato sulėtinimo spindulį pikseliais. Nustatant 4px, spalva sulieja 4 pikselių spindulyje.
% (procentai)：Brightness ir sepia funkcijos nustato efekto intensyvumą procentais. Brightness funkcijoje 100% yra originalus ryškumas, 120% – 20% ryškesnis.
deg (laipsniai)：Hue-rotate funkcija nustato spalvos pasukimo kampą laipsniais. Nustatant 180deg, spalva pasisuka priešingos spalvos atžvilgiu.

Kodėl tvarka keičia rezultatą

Filter funkcijos taikomos iš kairės į dešinę – kiekvienas efektas pritaikomas ankstesniajam. Tvarka keičia rezultatą. Pavyzdžiui, juodai baltą su sepia sukuria rudą atspalvį, bet sepia su juodai balta jį panaikina. Šiame įrankyje tvarka yra fiksuota, bet galite redaguoti sugeneruotą CSS ir keisti tvarką.

Skirtumas nuo backdrop-filter

Filter ir backdrop-filter naudoja tas pačias funkcijas, bet taikomi skirtingiems objektams.

filter：Filter – tai yavybė, taikanti efektus pačiam elementui (nuotraukai, tekstui ir kt.).
backdrop-filter：Backdrop-filter – tai yavybė, taikanti efektus elemento fonui (matome „įšalo stiklo" efektą).