CSS filtr a režimy prolnutí jsou výkonnými nástroji pro snadné použití úžasných vizuálních efektů na vaši webovou stránku bez nutnosti složitého kódu.

Filtr CSS a režimy prolnutí vám umožňují snadno aplikovat vizuální efekty na vaši webovou stránku. Filtry jsou sada předdefinovaných funkcí CSS používaných k úpravě vykreslování obrázků nebo jiných prvků HTML. Zatímco režimy prolnutí určují, jak má prvek splynout s pozadím nebo sousedními prvky.

Použití CSS filtrů

Filtry CSS aplikujete pomocí filtr vlastnost a vlastnost určující typ použitého efektu. Každá vlastnost filtru je funkce CSS funguje podobně jako proměnná CSS funkce. Přijímá parametr, který určuje, jak moc by měl filtr ovlivnit stylizovaný prvek.

K dispozici je 10 funkcí CSS filtru, pomocí kterých můžete upravit svůj HTML prvek:

  • rozmazat()
  • jas()
  • kontrast()
  • vrhat stín()
  • stupně šedi()
  • hue-rotate()
  • invertovat ()
  • neprůhlednost()
  • saturovat()
  • sépie()

Tyto filtry můžete použít jednotlivě nebo v kombinaci k vytvoření jedinečných stylů a vylepšení vzhledu prvků HTML.

instagram viewer

Některé z těchto filtrů fungují mnohem lépe s jinými, když se používají správným způsobem.

Zde jsou příklady kombinování filtrů CSS pro dosažení různých vizuálních efektů na prvku obrázku.

1. Stupně šedi a sépie

The stupně šedi() Filtr odstraní z obrázku nebo textového prvku všechny informace o barvě. Filtr nabývá hodnoty mezi 0 a 1, přičemž 0 znamená původní barvu a 1 je úplný efekt ve stupních šedi.

The sépie() Filtr aplikuje na obrázek nebo textový prvek efekt sépiového tónu. Filtr také nabývá hodnoty mezi 0 a 1.

Například:

img {
filtr: stupně šedi(14%) sépie(30%);
}

Kombinování stupně šedi() na 14 % a sépie() na 30% může vytvořit vintage nebo retro efekt na vaší image.

2. Invertovat a Saturovat

The saturovat() filtr zvyšuje nebo snižuje sytost obrázku nebo textového prvku. Filtr nabývá hodnoty mezi 0 a nekonečnem, přičemž 1 je původní barva a vyšší hodnoty zvyšují sytost.

The invertovat () Filtr invertuje barvy obrázku nebo textového prvku převrácením odstínu každé barvy o 180 stupňů na barevném kole. To znamená, že filtr mění úrovně jasu a sytosti prvku při zachování odstínu.

Například:

img {
filtr: převrátit(30%) saturovat(75%);
}

Tento kód invertuje barvy obrázku a zvyšuje sytost o 75 %.

3. Hue-Rotate a Contrast

The hue-rotate() filtr otočí odstíny obrázku nebo textového prvku, což znamená, že změní celkovou barvu prvku při zachování úrovně jasu a sytosti. Míru otočení lze zadat ve stupních, přičemž 0 představuje původní barvu a 360 představuje úplné otočení zpět k původní barvě.

Kombinace hue-rotate() a kontrast() filtry mohou vytvořit živý a barevný efekt na vašich snímcích.

Například:

img {
filtr: odstín-otočit(10stupně) kontrast(150%);
}

Hue-rotate může přijmout hodnotu stupně, grad, radnebo otočit se. Výše uvedený kód otočí odstín obrázku o 10 stupňů a zvýší kontrast.

4. Jas a rozostření

Filtry jasu a rozostření jsou velmi samozřejmé. První upravuje jas vašeho obrázku a druhý ovládá úroveň použitého rozostření.

Kombinace jas() a rozmazat() filtry mohou vytvořit snový a měkký efekt na vašich snímcích.

Například:

img {
filtr: jas(0.8) rozmazat(5px);
}

Výše uvedený kód snižuje jas o 0.8 (80%) a platí a 5px efekt rozostření obrazu.

5. Vržený stín a neprůhlednost

Efekt vrženého stínu je vizuální efekt, ve kterém se zdá, že prvek vrhá stín na povrch za ním, což vytváří iluzi hloubky a rozměrnosti. Vržené stíny jsou často aplikovány na text nebo obrázky, aby vytvořily pocit oddělení mezi prvkem a pozadím.

Filtr krytí mezitím řídí průhlednost prvku.

Kombinace vrhat stín() a neprůhlednost() filtry mohou vytvořit jemný efekt na vaše textové prvky.

Například:

.textový efekt {
přeměnit: přeložit(-50%, -50%);
barva: Černá;
vrhat stín: 10px 9px 9pxbéžový;
neprůhlednost: 70%;
}

V tomto příkladu je vržený stín umístěn 10 pixelů vpravo a 9 pixelů dolů s poloměrem rozostření 9 pixelů. Barva stínu je specifikována jako béžová. Rovněž je stanovena neprůhlednost 70 %.

Použití režimů prolnutí CSS

Režimy prolnutí CSS řídí, jak se obsah prvku prolíná s pozadím nebo jinými prvky, což umožňuje kreativní efekty kompozice.

Mezi nejoblíbenější případy použití režimů prolnutí CSS patří:

  • Vytváření přechodů: K vytvoření lze použít režimy prolnutí několik přechodů pozadí CSS Tento přechod mezi barvami vám poskytuje snadný a efektivní způsob, jak přidat hloubku a rozměr vašim návrhům.
  • Přidání textury: Režimy prolnutí můžete také použít k přidání textury do pozadí, obrázků a dalších prvků na stránce. To může být skvělý způsob, jak vytvořit jedinečný vzhled a přidat vizuální zajímavost jinak jednoduchým prvkům.
  • Úprava barev: Pomocí režimů prolnutí můžete upravit barvy prvků na stránce, včetně úprava barev pozadí. To vám umožní snadno vytvářet efekty, jako jsou barevné překryvy nebo tónované obrázky.

Dva nejběžnější režimy prolnutí jsou režim prolnutí pozadí a mix-blend-mode. Obě vlastnosti sdílejí stejných 15 hodnot: normální, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color-burn, luminosity, different, hard-light, soft-light, failure a hue.

Měli byste použít režim prolnutí pozadí když máte více rozvržení pozadí, jako jsou obrázky pozadí na prvku, a chcete, aby se všechny vzájemně prolínaly.

Můžete také použít mix-blend-mode prolnutí obsahu daného prvku s obsahem jeho přímého rodiče. The mix-blend-mode se obvykle používá k prolnutí obsahu v popředí, jako je text, tvary nebo obrázky.

Zde je příklad použití mix-blend-mode pro spojení textu a obrázku.

HTML:

<divtřída="kontejner">
<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"
 />
<divtřída="obsah">
<h1>Vítejteh1>
<p>Dobrý den, uživateli!p>
div>
div>

CSS:

.kontejner {
pozice: absolutní;
šířka: 100%;
výška: 100%;
}
.obrázek na pozadí {
šířka: 100%;
výška: 100%;
objekt-fit: Pokrýt;
}


.obsah {
pozice: absolutní;
horní: 50%;
vlevo, odjet: 50%;
přeměnit: přeložit(-50%, -50%);
zarovnání textu: centrum;
mix-blend-mode: rozdíl;
}


h1 {
velikost písma: 60px;
barva: bílý;
}
p {
velikost písma: 40px;
barva: bílý;
}

The rozdíl režim prolnutí vypočítá absolutní rozdíl mezi hodnotami barev textu a podkladového tmavého obrázku.

V tomto scénáři by barva textu interagovala s tmavým pozadím, což by vedlo k efektu vysokého kontrastu.

Kombinace filtrů a režimů prolnutí

Můžete kombinovat filtry a režimy prolnutí a vytvářet tak ještě vizuálně zajímavější efekty. Společným používáním obou vlastností můžete dosáhnout jedinečných a kreativních výsledků, které je těžké replikovat s jinými vlastnostmi CSS.

Zde je příklad, který kombinuje filtr a režim prolnutí za účelem vytvoření komplexnějšího efektu:

.můj-prvek {
filtr: jas(150%) odstín-otočit(180stupně) vrhat stín(0px 0px 10pxrgba(0, 0, 0, 0.5));
mix-blend-mode: obrazovka;
}

Tento kód kombinuje filtry; jas, odstín-otočit, vrhat stína a mix-blend-mode hodnoty obrazovka k obrazu. Zvyšuje jas o 150 %, zatímco hue-rotovat převrátí barvy obrázku o 180 stupňů.

Poté se také aplikuje vržený stín. Konečně, obrazovka hodnota pro režim prolnutí zkombinuje barvy obrázku s podkladovým pozadím, výsledkem je efekt, kdy jsou světlejší barvy zesíleny a tmavší barvy jsou s nimi smíchány Pozadí.

Zvládnutí filtrů a režimů prolnutí

Dozvěděli jste se o různých typech filtrů CSS a o tom, jak je můžete použít na prvky HTML. Pomocí různých funkcí filtru, jako je rozostření, kontrast a otočení odstínu, můžete upravit vzhled svých obrázků. Také jste viděli příklady režimů prolnutí v akci a jak je lze použít k vytvoření jedinečných návrhů.

Pokud budete s těmito technikami více experimentovat, můžete svým návrhům přidat další úroveň vizuálního zájmu.