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 Glitch szöveg effektus
Hozzon létre lenyűgöző glitch-effektusokat szövegéhez ezzel az interaktív generátorral. Tökéletes cyberpunkhoz, játékhoz vagy bármilyen olyan dizájnhoz, amelyhez éles, futurisztikus megjelenésre van szükség.
CSS3 átalakítások egyszerű létrehozása
Hatékony, intuitív eszköz összetett CSS3 transzformációk létrehozásához kódírás nélkül. Valós időben vizualizálhatja a változásokat, és másolhatja a generált CSS-t a projektekben való használatra.
SCSS-CSS átalakító
Alakítsa át SCSS-kódját CSS-re. Gyors, egyszerű és biztonságos.
JSON-szerkesztő
Szerkessze a nagy JSON-t könnyedén - villámgyorsan és simán
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ú.
Hex-től decimálisig
Konvertálja a hexadecimális számokat decimálissá könnyedén