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
Mažiau į CSS Konverteris
Paverskite savo "Less" kodą į CSS. Greita, paprasta ir saugu.
Sass į CSS Konverteris
Paverskite savo Sass kodą į CSS. Greita, paprasta ir saugu.
Rašiklis į CSS Konverteris
Transformuokite savo SCSS kodą į CSS. Greita, paprasta ir saugu.
HSV į CMYK
Konvertuokite HSV spalvų kodus į CMYK reikšmes spausdinimo dizainui
Mažiau į CSS Konverteris
Paverskite savo "Less" kodą į CSS. Greita, paprasta ir saugu.
CSS į LESS Konverteris
Transformuokite savo CSS kodą į LESS naudodami kintamuosius, įdėjimą ir kt. Greita, paprasta ir saugu.