Ako používať filtre CSS a režimy prelínania na vytváranie vizuálnych efektov

CSS filter a režimy prelínania vám umožňujú jednoducho aplikovať vizuálne efekty na vašu webovú stránku. Filtre sú množinou preddefinovaných funkcií CSS používaných na úpravu vykresľovania obrázkov alebo iných prvkov HTML. Zatiaľ čo režimy prelínania určujú, ako sa má prvok prelínať s pozadím alebo susednými prvkami.

Používanie filtrov CSS

Filtre CSS aplikujete pomocou filter vlastnosť a vlastnosť špecifikujúca typ použitého efektu. Každá vlastnosť filtra je funkcia CSS, tj funguje podobne ako premenná CSS funkciu. Prijíma parameter, ktorý určuje, do akej miery by mal filter ovplyvniť štylizovaný prvok.

Na úpravu vášho prvku HTML je k dispozícii 10 funkcií filtra CSS:

• rozmazať()
• jas()
• kontrast()
• Vrhať tieň()
• odtiene sivej()
• hue-rotate()
• invertovať ()
• nepriehľadnosť()
• nasýtiť()
• sépia()

Tieto filtre môžete použiť jednotlivo alebo v kombinácii na vytvorenie jedinečných štýlov a zlepšenie vzhľadu prvkov HTML.

Niektoré z týchto filtrov fungujú oveľa lepšie s inými, keď sa používajú správnym spôsobom.

Tu sú príklady kombinovania filtrov CSS na dosiahnutie rôznych vizuálnych efektov na prvku obrázka.

1. Odtiene šedej a sépia

The odtiene sivej() filter odstráni všetky farebné informácie z obrázka alebo textového prvku. Filter nadobúda hodnotu medzi 0 a 1, pričom 0 znamená pôvodnú farbu a 1 predstavuje úplný efekt v odtieňoch sivej.

The sépia() Filter aplikuje na obrázok alebo textový prvok efekt sépiového tónu. Filter tiež nadobúda hodnotu medzi 0 a 1.

Napríklad:

img {
filter: v odtieňoch sivej(14%) sépia(30%);
}

Kombinovanie odtiene sivej() na 14 % a sépia() na 30% môže vytvoriť vintage alebo retro efekt na vašom obrázku.

2. Invertovať a Sýtiť

The nasýtiť() filter zvyšuje alebo znižuje sýtosť obrázka alebo textového prvku. Filter nadobúda hodnotu medzi 0 a nekonečnom, pričom 1 je pôvodná farba a vyššie hodnoty zvyšujú sýtosť.

The invertovať () Filter invertuje farby obrázka alebo textového prvku prevrátením odtieňa každej farby o 180 stupňov na farebnom koliesku. To znamená, že filter mení úroveň jasu a sýtosti prvku pri zachovaní odtieňa.

Napríklad:

img {
filter: prevrátiť(30%) nasýtiť(75%);
}

Tento kód invertuje farby obrázka a zvyšuje sýtosť o 75 %.

3. Hue-Rotate a Contrast

The hue-rotate() Filter otočí odtiene obrázka alebo textového prvku, čo znamená, že zmení celkovú farbu prvku pri zachovaní úrovní jasu a sýtosti. Miera otočenia môže byť špecifikovaná v stupňoch, pričom 0 predstavuje pôvodnú farbu a 360 predstavuje úplné otočenie späť na pôvodnú farbu.

Kombináciou hue-rotate() a kontrast() filtre môžu vytvoriť živý a farebný efekt na vašich obrázkoch.

Napríklad:

img {
filter: odtieň-otočiť(10stupeň) kontrast(150%);
}

Hue-rotate môže prijať hodnotu stupeň, grad, rad, alebo otočiť. Vyššie uvedený kód otočí odtieň obrazu o 10 stupňov a zvýši kontrast.

4. Jas a rozmazanie

Filtre jasu a rozmazania sú veľmi jasné. Prvý upravuje jas obrázka a druhý ovláda úroveň použitého rozmazania.

Kombináciou jas() a rozmazať() filtre môžu vytvoriť snový a jemný efekt na vašich obrázkoch.

Napríklad:

img {
filter: jas(0.8) rozmazať(5px);
}

Vyššie uvedený kód zníži jas o 0.8 (80%) a platí a 5 pixelov efekt rozmazania obrazu.

5. Vržený tieň a nepriehľadnosť

Efekt vrhnutého tieňa je vizuálny efekt, pri ktorom sa zdá, že prvok vrhá tieň na povrch za ním, čím vytvára ilúziu hĺbky a rozmerov. Vržené tiene sa často používajú na text alebo obrázky, aby vytvorili pocit oddelenia medzi prvkom a pozadím.

Filter opacity medzitým riadi priehľadnosť prvku.

Kombináciou Vrhať tieň() a nepriehľadnosť() filtre môžu vytvoriť jemný efekt na vaše textové prvky.

Napríklad:

.textový efekt {
transformovať: preložiť(-50%, -50%);
farba: čierna;
Vrhať tieň: 10px 9px 9pxbéžová;
nepriehľadnosť: 70%;
}

V tomto príklade je vrhnutý tieň umiestnený 10 pixelov vpravo a 9 pixelov dole s polomerom rozostrenia 9 pixelov. Farba tieňa je špecifikovaná ako béžová. Špecifikovaná je aj nepriehľadnosť 70 %.

Používanie režimov prelínania CSS

Režimy prelínania CSS riadia, ako sa obsah prvku prelína s pozadím alebo inými prvkami, čo umožňuje kreatívne kompozičné efekty.

Niektoré z najpopulárnejších prípadov použitia režimov prelínania CSS zahŕňajú:

• Vytváranie prechodov: Na vytváranie je možné použiť režimy prelínania niekoľko gradientov pozadia CSS Tento prechod medzi farbami vám poskytuje jednoduchý a efektívny spôsob, ako pridať hĺbku a rozmer vašim návrhom.
• Pridanie textúry: Režimy prelínania môžete použiť aj na pridanie textúry do pozadia, obrázkov a iných prvkov na stránke. Môže to byť skvelý spôsob, ako vytvoriť jedinečný vzhľad a pridať vizuálny záujem inak obyčajným prvkom.
• Úprava farieb: Pomocou režimov prelínania môžete upraviť farby prvkov na stránke vrátane úprava farieb pozadia. To vám umožní jednoducho vytvárať efekty, ako sú farebné prekrytia alebo tónované obrázky.

Dva najbežnejšie režimy prelínania sú režim prelínania pozadia a mix-blend-mode. Obe vlastnosti zdieľajú rovnakých 15 hodnôt: normálne, násobenie, obrazovka, prekrytie, stmavenie, zosvetlenie, zoslabenie farieb, sýtosť, vypálenie farby, svietivosť, rozdiel, tvrdé svetlo, mäkké svetlo, vylúčenie a odtieň.

Mali by ste použiť režim prelínania pozadia keď máte viacero rozložení pozadia, napríklad obrázky pozadia na prvku, a chcete, aby sa všetky navzájom prelínali.

Môžete tiež použiť mix-blend-mode prelínať obsah daného prvku s obsahom jeho priameho rodiča. The mix-blend-mode sa zvyčajne používa na miešanie obsahu v popredí, ako je text, tvary alebo obrázky.

Tu je príklad použitia mix-blend-mode na spojenie textu a obrázka.

HTML:

<divtrieda="kontajner">
<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"
 />
<divtrieda="obsah">
<h1>Vitajteh1>
<p>Dobrý deň, Používateľ!p>
div>
div>

CSS:

.kontajner {
pozíciu: absolútne;
šírka: 100%;
výška: 100%;
}
.obrázok na pozadí {
šírka: 100%;
výška: 100%;
objekt-fit: kryt;
}
.obsah {
pozíciu: absolútne;
top: 50%;
vľavo: 50%;
transformovať: preložiť(-50%, -50%);
zarovnanie textu: stred;
mix-blend-mode: rozdiel;
}
h1 {
veľkosť písma: 60px;
farba: biely;
}
p {
veľkosť písma: 40px;
farba: biely;
}

The rozdiel režim prelínania vypočíta absolútny rozdiel medzi hodnotami farieb textu a tmavého obrázka.

V tomto scenári by farba textu interagovala s tmavým pozadím, čo by viedlo k efektu vysokého kontrastu.

Kombinácia filtrov a režimov miešania

Môžete kombinovať filtre a režimy prelínania a vytvárať tak ešte vizuálne zaujímavejšie efekty. Spoločným používaním oboch vlastností môžete dosiahnuť jedinečné a kreatívne výsledky, ktoré sa ťažko replikujú s inými vlastnosťami CSS.

Tu je príklad, ktorý kombinuje filter a režim prelínania na vytvorenie komplexnejšieho efektu:

.môj-element {
filter: jas(150%) odtieň-otočiť(180stupeň) Vrhať tieň(0px 0px 10pxrgba(0, 0, 0, 0.5));
mix-blend-mode: obrazovke;
}

Tento kód kombinuje filtre; jas, odtieň-otočiť, Vrhať tieňa a mix-blend-mode hodnoty obrazovke k obrázku. Zvyšuje jas o 150 %, zatiaľ čo hue-rotovať obráti farby obrázka o 180 stupňov.

Potom sa tiež aplikuje vrhnutý tieň. Nakoniec, obrazovke hodnota pre režim prelínania skombinuje farby obrázka s podkladovým pozadím, výsledkom je efekt, pri ktorom sa svetlejšie farby zintenzívnia a tmavšie farby sa zmiešajú pozadie.

Ovládanie filtrov a režimov miešania

Dozvedeli ste sa o rôznych typoch filtrov CSS a o tom, ako ich môžete použiť na prvky HTML. Pomocou rôznych funkcií filtra, ako je rozmazanie, kontrast a otočenie odtieňa, môžete upraviť vzhľad svojich obrázkov. Videli ste tiež príklady režimov prelínania v akcii a ako ich možno použiť na vytvorenie jedinečných návrhov.

Ak budete s týmito technikami viac experimentovať, môžete svojim návrhom pridať ďalšiu úroveň vizuálneho záujmu.