CSS-suodattimen generaattori
Luo ja visualisoi mukautettuja CSS-kuvasuodattimia
Preview
CSS Code
Suodattimen säätimet Sävyn
Suositut suodattimet
Vintage
Neon Glow
Polaroid
Vintage Film
taide
Kuinka käyttää CSS-suodattimia
Mitä CSS-suodattimet ovat?
CSS-suodattimien avulla voit käyttää elementissä graafisia tehosteita, kuten sumennusta tai värinsiirtoa. Niitä käytetään yleisesti kuvissa, taustoissa ja reunuksissa.
Suodattimia voidaan käyttää visuaalisten tehosteiden luomiseen, kuvien parantamiseen tai ainutlaatuisten suunnitteluelementtien luomiseen ilman ulkoisia kuvankäsittelytyökaluja.
Tuetut CSS-suodattimen ominaisuudet
-
blur()– Käyttää elementtiin Gaussin sumennusta. -
brightness()- Säätää elementin kirkkautta. -
contrast()- Säätää elementin kontrastia. -
grayscale()- Muuntaa elementin harmaasävyiseksi. -
hue-rotate()- Käyttää elementtiin sävykiertoa. -
invert()- Kääntää elementin värit. -
opacity()- Säätää elementin peittävyyttä. -
saturate()- Kyllästää tai vähentää elementin tyydytystä. -
sepia()- Muuntaa elementin seepiaksi.
Suodattimien
Tämän työkalun luoman CSS-koodin avulla voit käyttää suodattimia mihin tahansa HTML-elementtiin. Toimi näin:
1. Valitse elementti
Valitse HTML-elementti, johon haluat käyttää suodatinta. Tämä voi olla kuva, tausta tai mikä tahansa muu elementti.
2. Lisää luokka tai tunnus
Jos elementillä ei vielä ole luokkaa tai tunnusta, lisää sellainen, jotta se on helpompi kohdistaa CSS:llä.
3. Käytä suodatinta
Käytä CSS-ominaisuuttafiltertyylitaulukossasi tai sidotussa tyylissäsi käyttääksesi luotua suodatinta.
.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }4. Yhdistä useita suodattimia
Voit yhdistää useita suodatintoimintoja luettelemalla ne peräkkäin välilyönneillä erotettuina.
filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);Selaimen yhteensopivuus
CSS-suodattimia tuetaan laajalti nykyaikaisissa selaimissa, kuten Chromessa, Firefoxissa, Safarissa, Edgessä ja Operassa. Vanhemmat selaimet, kuten Internet Explorer, eivät kuitenkaan tue niitä.
Related Tools
Kynän muunnos CSS-muotoon
Muunna SCSS-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.
SCSS:stä CSS:ksi muunnin
Muunna SCSS-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.
Sass:sta CSS:ksi muunnin
Muunna Sass-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.
HEX CMYK:ksi
Muunna HEX-värikoodit CMYK-muotoon tulostussovelluksiin
MD6-hajautusgeneraattori
Luo MD6-tiivisteitä nopeasti ja helposti
Oktaali desimaaliksi
Muunna oktaaliluvut desimaaliluvuiksi vaivattomasti