CSS szűrő generátor
Egyéni CSS-képszűrők létrehozása és megjelenítése
Preview
CSS Code
Vezérlők szűrése
Népszerű szűrők
Vintage
Neon Glow
Polaroid
Vintage Film
Digitális művészet
A CSS-szűrők használata
Mik azok a CSS szűrők?
A CSS-szűrők lehetővé teszik olyan grafikus effektusok alkalmazását, mint az elmosódás vagy a színeltolás egy elemre. Általában képekhez, hátterekhez és szegélyekhez használják őket.
A szűrők segítségével vizuális effektusokat hozhat létre, képeket javíthat vagy egyedi tervezési elemeket hozhat létre külső képszerkesztő eszközök nélkül.
Támogatott CSS-szűrő tulajdonságok
-
blur()- Gauss-életlenítést alkalmaz az elemre. -
brightness()- Beállítja az elem fényerejét. -
contrast()- Beállítja az elem kontrasztját. -
grayscale()- Az elemet szürkeárnyalatossá alakítja. -
hue-rotate()- Színárnyalat-elforgatást alkalmaz az elemre. -
invert()- Megfordítja az elem színeit. -
opacity()- Beállítja az elem átlátszóságát. -
saturate()- Telíti vagy telítetleníti az elemet. -
sepia()- Az elemet szépiává alakítja.
Szűrők alkalmazása
Az eszköz által generált CSS-kód segítségével szűrőket alkalmazhat bármely HTML-elemre. Ezt a következőképpen teheti meg:
1. Válasszon ki egy elemet
Válassza ki azt a HTML-elemet, amelyre alkalmazni szeretné a szűrőt. Ez lehet kép, háttér vagy bármilyen más elem.
2. Adjon hozzá egy osztályt vagy azonosítót
Ha az elem még nem rendelkezik osztállyal vagy azonosítóval, adjon hozzá egyet, hogy könnyebben megcélozható legyen a CSS-sel.
3. Alkalmazza a szűrőt
Használja a CSS-tfiltertulajdonságot a stíluslapban vagy a beágyazott stílusban a létrehozott szűrő alkalmazásához.
.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }4. Kombináljon több szűrőt
Több szűrőfüggvényt kombinálhat, ha egymás után, szóközökkel elválasztva listázza őket.
filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);Böngésző kompatibilitás
A CSS-szűrők széles körben támogatottak a modern böngészőkben, beleértve a Chrome-ot, a Firefoxot, a Safarit, az Edge-t és az Operát. A régebbi böngészők, például az Internet Explorer azonban nem támogatják őket.
Related Tools
CSS szépítő
Formázza és szépítse CSS-kódját professzionális pontossággal
Ceruza a CSS átalakítóhoz
Alakítsa át SCSS-kódját CSS-re. Gyors, egyszerű és biztonságos.
SCSS-CSS átalakító
Alakítsa át SCSS-kódját CSS-re. Gyors, egyszerű és biztonságos.
Pantone-ról RGB-re
Konvertálja a Pantone színeket RGB értékekké a digitális tervezéshez
Konvertálja az XML-t JSON-ba könnyedén
XML-adatait egyetlen kattintással strukturált JSON formátumba alakíthatja. Gyors, biztonságos és teljesen böngészőalapú.
Százalékos Kalkulátor
Könnyen kiszámíthatja a százalékokat intuitív százalékkalkulátorunkkal.