CSS filtrų generatorius
Pasirinktinių CSS vaizdo filtrų kūrimas ir vizualizavimas
Preview
CSS Code
Filtro valdikliai
Populiarūs filtrai
Vintage
Neon Glow
Polaroid
Senovinis filmas
Skaitmeninis menas
Kaip naudoti CSS filtrus
Kas yra CSS filtrai?
CSS filtrai leidžia elementui taikyti grafinius efektus, pvz., suliejimą ar spalvų perkėlimą. Jie dažniausiai naudojami vaizdams, fonams ir kraštinėms.
Filtrai gali būti naudojami vaizdiniams efektams kurti, vaizdams tobulinti arba unikaliems dizaino elementams kurti nereikalaujant išorinių vaizdo redagavimo įrankių.
Palaikomos CSS filtro ypatybės
-
blur()- Elementui taiko Gauso suliejimą. -
brightness()- Reguliuoja elemento ryškumą. -
contrast()- Reguliuoja elemento kontrastą. -
grayscale()- Konvertuoja elementą į pustonius. -
hue-rotate()- Elementui taiko atspalvio sukimąsi. -
invert()- Apverčia elemento spalvas. -
opacity()- Reguliuoja elemento neskaidrumą. -
saturate()- Sotina arba desaturuoja elementą. -
sepia()- Konvertuoja elementą į sepiją.
Kaip taikyti filtrus
Naudodami šio įrankio sugeneruotą CSS kodą, filtrus galite pritaikyti bet kuriam HTML elementui. Štai kaip tai padaryti:
1. Pasirinkite elementą
Pasirinkite HTML elementą, kuriam norite taikyti filtrą. Tai gali būti vaizdas, fonas ar bet kuris kitas elementas.
2. Pridėkite klasę arba ID
Jei elementas dar neturi klasės ar ID, pridėkite jį, kad būtų lengviau taikyti naudojant CSS.
3. Taikykite filtrą
Naudokite CSSfilterypatybę savo stiliaus apraše arba įdėtajame stiliuje, kad pritaikytumėte sugeneruotą filtrą.
.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }4. Sujunkite kelis filtrus
Galite sujungti kelias filtro funkcijas, išvardydami jas vieną po kitos, atskirtas tarpais.
filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);Naršyklės suderinamumas
CSS filtrai plačiai palaikomi šiuolaikinėse naršyklėse, įskaitant "Chrome", "Firefox", "Safari", "Edge" ir "Opera". Tačiau senesnės naršyklės, pvz., "Internet Explorer", jų nepalaiko.
Related Tools
Rašiklis į CSS Konverteris
Transformuokite savo SCSS kodą į CSS. Greita, paprasta ir saugu.
SCSS į CSS keitiklis
Transformuokite savo SCSS kodą į CSS. Greita, paprasta ir saugu.
Sass į CSS Konverteris
Paverskite savo Sass kodą į CSS. Greita, paprasta ir saugu.
Laiko Žymos Konverteris
Lengvai konvertuokite laiko žymas tarp skirtingų formatų
CSS slinkties juostos generatorius
Lengvai tinkinkite savo svetainės slinkties juostas
CSS Minifier
Suspauskite ir optimizuokite savo CSS kodą profesionaliu tikslumu