A CSS-szűrő és a keverési módok hatékony eszközök, amelyek segítségével egyszerűen alkalmazhat lenyűgöző vizuális effektusokat weboldalán, bonyolult kód nélkül.

A CSS-szűrő és a keverési módok segítségével könnyedén alkalmazhat vizuális effektusokat weboldalán. A szűrők előre meghatározott CSS-függvények, amelyek a képek vagy más HTML-elemek megjelenítésének beállítására szolgálnak. Míg a keverési módok meghatározzák, hogy egy elem hogyan keveredjen a hátterével vagy a szomszédos elemekkel.

CSS-szűrők használata

A CSS-szűrőket a szűrő tulajdonság és az alkalmazott hatástípust meghatározó tulajdonság. Minden szűrő tulajdonság egy CSS függvény, az hasonlóan működik, mint egy CSS-változó funkció. Elfogad egy paramétert, amely megadja, hogy a szűrő milyen mértékben befolyásolja a stílusos elemet.

10 CSS-szűrő funkció áll rendelkezésre a HTML-elem stílusának meghatározásához:

  • elhomályosít()
  • Fényerősség()
  • kontraszt()
  • árnyék()
  • szürkeárnyalatos()
  • hue-rotate()
  • invert()
  • átlátszatlanság()
  • telített()
  • szépia()

Ezeket a szűrőket külön-külön vagy kombinálva is használhatja egyedi stílusok létrehozására és HTML-elemei megjelenésének javítására.

instagram viewer

Néhány ilyen szűrő sokkal jobban működik másokkal, ha megfelelő módon használják.

Íme példák a CSS-szűrők kombinálására, hogy különböző vizuális hatásokat érjenek el egy képelemen.

1. Szürkeárnyalatos és szépia

A szürkeárnyalatos() szűrő eltávolítja az összes színinformációt a képről vagy szöveges elemről. A szűrő 0 és 1 közötti értéket vesz fel, ahol a 0 az eredeti színt, az 1 pedig a teljes szürkeárnyalatos hatást jelenti.

A szépia() szűrő szépia tónusú hatást alkalmaz egy képre vagy szövegelemre. A szűrő 0 és 1 közötti értéket is vesz fel.

Például:

img {
szűrő: szürkeárnyalatos(14%) szépia(30%);
}

Kombinálás szürkeárnyalatos() 14%-nál és szépia() 30%-nál vintage vagy retro hatást kelthet a képén.

2. Megfordítás és telítés

A telített() szűrő növeli vagy csökkenti egy kép vagy szövegelem telítettségét. A szűrő 0 és végtelen közötti értéket vesz fel, ahol az 1 az eredeti szín, a magasabb értékek pedig növelik a telítettséget.

A invert() A szűrő megfordítja egy kép vagy szövegelem színét azáltal, hogy minden szín árnyalatát 180 fokkal elfordítja a színkörön. Ez azt jelenti, hogy a szűrő megváltoztatja az elem fényerejét és telítettségét, miközben megtartja a színárnyalatot.

Például:

img {
szűrő: megfordítani(30%) telít(75%);
}

Ez a kód megfordítja a kép színeit és 75%-kal növeli a telítettséget.

3. Hue-Rotate és Contrast

A hue-rotate() A szűrő elforgatja egy kép vagy szövegelem árnyalatait, ami azt jelenti, hogy megváltoztatja az elem általános színét, miközben megtartja a fényerőt és a telítettséget. Az elforgatás mértéke fokban adható meg, ahol a 0 az eredeti színt, a 360 pedig az eredeti színhez való teljes visszaforgatást jelöli.

Kombinálva a hue-rotate() és kontraszt() a szűrők élénk és színes hatást kelthetnek a képeken.

Például:

img {
szűrő: színárnyalat-forgatás(10deg) kontraszt(150%);
}

A Hue-rotate értéket elfogadja deg, grad, rad, vagy fordulat. A fenti kód 10 fokkal elforgatja a kép színárnyalatát és növeli a kontrasztot.

4. Fényerő és elmosódás

A fényerő és az elmosódás szűrői nagyon magától értetődőek. Az első a kép fényerejét állítja be, az utóbbi pedig az alkalmazott elmosódás szintjét.

Kombinálva a Fényerősség() és elhomályosít() szűrők álmodozó és lágy hatást kelthetnek a képeken.

Például:

img {
szűrő: Fényerősség(0.8) elhomályosít(5px);
}

A fenti kód csökkenti a fényerőt 0.8 (80%) és alkalmazza a 5 képpont elmosódás hatása a képre.

5. Drop-Shadow és Opacity

A vetett árnyékhatás olyan vizuális hatás, amelyben egy elem árnyékot vet a mögötte lévő felületre, ami a mélység és a dimenzionalitás illúzióját kelti. A vetett árnyékokat gyakran alkalmazzák a szövegre vagy a képekre, hogy az elem és a háttér elválasztásának érzetét keltsék.

Eközben az átlátszatlanság szűrő szabályozza az elem átlátszóságát.

Kombinálva a árnyék() és átlátszatlanság() szűrők finom hatást keltehetnek a szöveges elemeken.

Például:

.text-effektus {
átalakítani: fordít(-50%, -50%);
szín: fekete;
árnyék: 10px 9px 9pxbézs;
átlátszatlanság: 70%;
}

Ebben a példában a vetett árnyék 10 képponttal jobbra és 9 képponttal alul van elhelyezve, 9 képpontos elmosódási sugárral. Az árnyék színe bézs. 70%-os átlátszatlanság is meg van adva.

CSS keverési módok használata

A CSS-keverési módok szabályozzák, hogy egy elem tartalma hogyan keveredjen a háttérrel vagy más elemekkel, lehetővé téve a kreatív kompozíciós hatásokat.

A CSS-keverési módok legnépszerűbb használati esetei a következők:

  • Színátmenetek létrehozása: Keverési módok használhatók a létrehozáshoz több CSS háttér gradiens átmenet a színek között, így egyszerű és hatékony módja annak, hogy mélységet és dimenziót adjon a tervekhez.
  • Textúra hozzáadása: A keverési módokat is használhatja, hogy textúrát adjon a hátterekhez, képekhez és más elemekhez az oldalon. Ez nagyszerű módja annak, hogy egyedi megjelenést hozzon létre, és vizuális érdeklődést keltsen az egyébként egyszerű elemekhez.
  • Színek beállítása: A keverési módokkal beállíthatja az oldal elemeinek színét, beleértve a háttérszínek beállítása. Ezzel egyszerűen hozhat létre effektusokat, például színes átfedéseket vagy színezett képeket.

A két leggyakoribb keverési mód a háttér-keverési mód és mix-blend-mód. Mindkét tulajdonság ugyanazt a 15 értéket tartalmazza: normál, szorzás, képernyő, átfedés, sötétítés, világosítás, szín-kikerülő, telítettség, színégetés, fényerő, különbség, erős fény, lágy fény, kizárás és színárnyalat.

Használnod kellene háttér-keverési mód ha több háttérelrendezéssel rendelkezik, például egy elemen lévő háttérképet, és azt szeretné, hogy mindegyik beleolvadjon egymásba.

Használhatja azt is mix-blend-mód hogy egy adott elem tartalmát összekeverjük a közvetlen szülőjének tartalmával. A mix-blend-mód jellemzően az előtérben lévő tartalom, például szöveg, alakzatok vagy képek keverésére szolgál.

Íme egy példa a használatára mix-blend-mód szöveg és kép keveréséhez.

HTML:

<divosztály="tartály">
<img
 src=" https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
 class="background-image"
 />
<divosztály="tartalom">
<h1>Üdvözöljükh1>
<p>Szia Felhasználó!p>
div>
div>

CSS:

.tartály {
pozíció: abszolút;
szélesség: 100%;
magasság: 100%;
}
.háttérkép {
szélesség: 100%;
magasság: 100%;
tárgyra illő: borító;
}


.tartalom {
pozíció: abszolút;
tetejére: 50%;
bal: 50%;
átalakítani: fordít(-50%, -50%);
szöveg igazítás: központ;
mix-blend-mód: különbség;
}


h1 {
betűméret: 60px;
szín: fehér;
}
p {
betűméret: 40px;
szín: fehér;
}

A különbség A keverési mód kiszámítja a szöveg és a mögöttes sötét kép színértékei közötti abszolút különbséget.

Ebben a forgatókönyvben a szöveg színe kölcsönhatásba lépne a sötét háttérrel, ami nagy kontraszthatást eredményez.

Szűrők és keverési módok kombinálása

A szűrők és a keverési módok kombinálásával vizuálisan még érdekesebb hatásokat hozhat létre. A két tulajdonság együttes használatával egyedi és kreatív eredményeket érhet el, amelyeket nehéz más CSS-tulajdonságokkal megismételni.

Íme egy példa, amely kombinálja a szűrőt és a keverési módot, hogy összetettebb hatást hozzon létre:

.én-elem {
szűrő: Fényerősség(150%) színárnyalat-forgatás(180deg) árnyék(0px 0px 10pxrgba(0, 0, 0, 0.5));
mix-blend-mód: képernyő;
}

Ez a kód egyesíti a szűrőket; Fényerősség, színárnyalat-forgatás, árnyékés a mix-blend-mód értékű képernyő a képhez. 150%-kal növeli a fényerőt, míg hue-forgatni 180 fokkal megfordítja a kép színeit.

Ezután egy vetett árnyékot is alkalmazunk. Végül a képernyő a keverési mód értéke egyesíti a kép színeit a mögöttes háttérrel, olyan hatást eredményez, amelyben a világosabb színek felerősödnek, és a sötétebb színek keverednek a háttér.

A szűrők és keverési módok elsajátítása

Megismerte a CSS-szűrők különböző típusait, és azt, hogy hogyan alkalmazhatja őket HTML-elemeihez. Különféle szűrőfunkciók használatával, mint például az elmosódás, a kontraszt és a színárnyalat elforgatása, módosíthatja a képek megjelenését. Példákat is láthatott a működés közbeni keverési módokra, és arra, hogy hogyan használhatók fel egyedi tervek létrehozására.

Ha többet kísérletezik ezekkel a technikákkal, további vizuális érdeklődést adhat a terveihez.