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 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.
SCSS-CSS átalakító
Alakítsa át SCSS-kódját CSS-re. Gyors, egyszerű és biztonságos.
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.
Sass to CSS Converter
Alakítsa át Sass-kódját CSS-re. Gyors, egyszerű és biztonságos.
CSS-SCSS átalakító
Alakítsa át CSS-kódját SCSS-sé változókkal, beágyazással és egyebekkel. Gyors, egyszerű és biztonságos.
SHA-512 Hash Kalkulátor
SHA-512 kivonatok gyors és egyszerű generálása