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
Less CSS-muotoon -muunnin
Muunna Less-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.
CSS3-siirtymägeneraattori
Sujuva peittävyyden siirtyminen
CSS Minifier
Pakkaa ja optimoi CSS-koodisi ammattimaisella tarkkuudella
HTML-dekoodaustyökalu
Pura HTML-entiteetit helposti suoraan selaimessasi.
Varausmuunnin
Muunna sähkövarausmittaukset eri yksiköiden välillä tarkasti
SHA-512/224 Hajautuslaskuri
Luo SHA-512/224-tiivisteitä nopeasti ja helposti