De CSS-filter- en overvloeimodi zijn krachtige hulpmiddelen om eenvoudig verbluffende visuele effecten op uw webpagina toe te passen zonder dat er complexe code nodig is.

Met de CSS-filter- en overvloeimodi kunt u eenvoudig visuele effecten op uw webpagina toepassen. Filters zijn een reeks vooraf gedefinieerde CSS-functies die worden gebruikt om de weergave van afbeeldingen of andere HTML-elementen aan te passen. Terwijl overvloeimodi bepalen hoe een element moet versmelten met zijn achtergrond of aangrenzende elementen.

CSS-filters gebruiken

U past CSS-filters toe met behulp van de filter eigenschap en een eigenschap die het toegepaste effecttype specificeert. Elke filtereigenschap is een CSS-functie, dat werkt op dezelfde manier als een CSS-variabele functie. Het accepteert een parameter om aan te geven hoeveel het filter het gestileerde element moet beïnvloeden.

Er zijn 10 CSS-filterfuncties beschikbaar om uw HTML-element te stylen:

  • vervagen()
  • helderheid()
  • contrast()
  • slagschaduw()
  • grijswaarden()
  • tint-roteren()
  • omkeren()
  • ondoorzichtigheid()
  • verzadigen()
  • sepia()

U kunt deze filters afzonderlijk of in combinatie gebruiken om unieke stijlen te creëren en het uiterlijk van uw HTML-elementen te verbeteren.

Sommige van deze filters werken veel beter samen met andere als ze op de juiste manier worden gebruikt.

Hier zijn voorbeelden van het combineren van CSS-filters om verschillende visuele effecten op een afbeeldingselement te bereiken.

1. Grijstinten en sepia

De grijswaarden() filter verwijdert alle kleurinformatie uit een afbeelding of tekstelement. Het filter heeft een waarde tussen 0 en 1, waarbij 0 de originele kleur betekent en 1 het volledige grijswaardeneffect.

De sepia() filter past een sepiatinteffect toe op een afbeelding of tekstelement. Het filter neemt ook een waarde aan tussen 0 en 1.

Bijvoorbeeld:

img {
filter: grijstinten(14%) sepia(30%);
}

Combineren grijswaarden() op 14% en sepia() bij 30% kan een vintage- of retro-effect op uw afbeelding ontstaan.

2. Inverteren en verzadigen

De verzadigen() filter verhoogt of verlaagt de verzadiging van een afbeelding of tekstelement. Het filter neemt een waarde aan tussen 0 en oneindig, waarbij 1 de oorspronkelijke kleur is en hogere waarden de verzadiging verhogen.

De omkeren() filter keert de kleuren van een afbeelding of tekstelement om door de tint van elke aanwezige kleur 180 graden op het kleurenwiel om te draaien. Dit betekent dat het filter de helderheid en verzadigingsniveaus van het element verandert terwijl de tint behouden blijft.

Bijvoorbeeld:

img {
filter: omkeren(30%) verzadigen(75%);
}

Deze code keert de kleuren van de afbeelding om en verhoogt de verzadiging met 75%.

3. Tint-roteren en contrast

De tint-roteren() filter roteert de tinten van een afbeelding of tekstelement, wat betekent dat het de algehele kleur van het element verandert terwijl de helderheid en verzadigingsniveaus behouden blijven. De mate van rotatie kan worden opgegeven in graden, waarbij 0 staat voor de originele kleur en 360 voor een volledige rotatie terug naar de originele kleur.

Het combineren van de tint-roteren() En contrast() filters kunnen een levendig en kleurrijk effect op uw afbeeldingen creëren.

Bijvoorbeeld:

img {
filter: tint-roteren(10graden) contrast(150%);
}

Hue-rotate kan een waarde accepteren van graden, grad, rad, of draai. De bovenstaande code roteert de tint van de afbeelding met 10 graden en verhoogt het contrast.

4. Helderheid en vervaging

De filters voor helderheid en onscherpte spreken voor zich. De eerste past de helderheid van uw afbeelding aan en de laatste regelt het toegepaste vervagingsniveau.

Het combineren van de helderheid() En vervagen() filters kunnen een dromerig en zacht effect op uw afbeeldingen creëren.

Bijvoorbeeld:

img {
filter: helderheid(0.8) vervagen(5px);
}

De bovenstaande code verlaagt de helderheid met 0.8 (80%) en past een 5px vervagingseffect op de afbeelding.

5. Slagschaduw en dekking

Een slagschaduweffect is een visueel effect waarbij een element een schaduw lijkt te werpen op het oppervlak erachter, waardoor de illusie van diepte en dimensionaliteit ontstaat. Slagschaduwen worden vaak toegepast op tekst of afbeeldingen om een ​​gevoel van scheiding tussen het element en de achtergrond te creëren.

Ondertussen regelt het dekkingsfilter de transparantie van een element.

Het combineren van de slagschaduw() En ondoorzichtigheid() filters kunnen een subtiel effect op uw tekstelementen creëren.

Bijvoorbeeld:

.text-effect {
transformeren: vertalen(-50%, -50%);
kleur: zwart;
slagschaduw: 10px 9px 9pxbeige;
ondoorzichtigheid: 70%;
}

In dit voorbeeld is de slagschaduw 10 pixels naar rechts en 9 pixels naar beneden gepositioneerd, met een vervagingsradius van 9 pixels. De schaduwkleur wordt opgegeven als beige. Er wordt ook een dekking van 70% gespecificeerd.

CSS-overvloeimodi gebruiken

CSS-overvloeimodi bepalen hoe de inhoud van een element overgaat in de achtergrond of andere elementen, waardoor creatieve compositie-effecten mogelijk zijn.

Enkele van de meest populaire use-cases voor CSS-overvloeimodi zijn:

  • Gradiënten maken: Overvloeimodi kunnen worden gebruikt om te creëren verschillende CSS-achtergrondgradiënten die overgang tussen kleuren, waardoor u op een gemakkelijke en efficiënte manier diepte en dimensie aan uw ontwerpen kunt toevoegen.
  • Textuur toevoegen: U kunt ook overvloeimodi gebruiken om textuur toe te voegen aan achtergronden, afbeeldingen en andere elementen op een pagina. Dit kan een geweldige manier zijn om een ​​unieke look te creëren en visuele interesse toe te voegen aan verder eenvoudige elementen.
  • Kleuren aanpassen: Met overvloeimodi kunt u de kleuren van elementen op een pagina aanpassen, inclusief achtergrondkleuren aanpassen. Hiermee kunt u eenvoudig effecten creëren, zoals kleuroverlays of getinte afbeeldingen.

De twee meest voorkomende overvloeimodi zijn achtergrond-blend-modus En mix-blend-modus. Beide eigenschappen delen dezelfde 15 waarden: normaal, vermenigvuldigen, scherm, overlay, donkerder, lichter, kleur ontwijken, verzadiging, kleur inbranden, helderheid, verschil, hard licht, zacht licht, uitsluiting en tint.

Je zou... moeten gebruiken achtergrond-blend-modus wanneer u meerdere achtergrondlay-outs heeft, zoals achtergrondafbeeldingen op een element, en wilt dat ze allemaal in elkaar overvloeien.

Je zou ook de mix-blend-modus om de inhoud van een bepaald element te mengen met de inhoud van zijn directe ouder. De mix-blend-modus wordt meestal gebruikt om inhoud op de voorgrond, zoals tekst, vormen of afbeeldingen, te mengen.

Hier is een voorbeeld van gebruiken mix-blend-modus om tekst en beeld te laten overvloeien.

HTML:

<divklas="houder">
<img
 src=" https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=comprimeren&cs=tinysrgb&w=1260&h=750&dpr=2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=comprimeren&cs=tinysrgb&w=1260&h=750&dpr=2"
 class="achtergrondafbeelding"
 />
<divklas="inhoud">
<h1>Welkomh1>
<P>Hallo gebruiker!P>
div>
div>

CSS:

.container {
positie: absoluut;
breedte: 100%;
hoogte: 100%;
}
.achtergrond afbeelding {
breedte: 100%;
hoogte: 100%;
object-fit: omslag;
}


.inhoud {
positie: absoluut;
bovenkant: 50%;
links: 50%;
transformeren: vertalen(-50%, -50%);
tekst uitlijnen: centrum;
mix-blend-modus: verschil;
}


h1 {
lettertypegrootte: 60px;
kleur: wit;
}
P {
lettertypegrootte: 40px;
kleur: wit;
}

De verschil Overvloeimodus berekent het absolute verschil tussen de kleurwaarden van de tekst en de onderliggende donkere afbeelding.

In dit scenario zou de tekstkleur interageren met de donkere achtergrond, wat resulteert in een hoog contrasteffect.

Filters en overvloeimodi combineren

U kunt filters en overvloeimodi combineren om nog meer visueel interessante effecten te creëren. Door beide eigenschappen samen te gebruiken, kunt u unieke en creatieve resultaten behalen die moeilijk te repliceren zijn met andere CSS-eigenschappen.

Hier is een voorbeeld waarin de filter- en overvloeimodus worden gecombineerd om een ​​complexer effect te creëren:

.mijn-element {
filter: helderheid(150%) tint-roteren(180graden) slagschaduw(0px 0px 10pxRGBA(0, 0, 0, 0.5));
mix-blend-modus: scherm;
}

Deze code combineert de filters; helderheid, tint-roteren, slagschaduw, en een mix-blend-modus van waarde scherm naar de afbeelding. Het verhoogt de helderheid met 150%, terwijl hue-draaien keert de kleuren van de afbeelding 180 graden om.

Vervolgens wordt er ook een slagschaduw aangebracht. Als laatste de scherm waarde voor de overvloeimodus combineert de kleuren van de afbeelding met de onderliggende achtergrond, resulterend in een effect waarbij lichtere kleuren worden geïntensiveerd en donkere kleuren worden vermengd met de achtergrond.

Beheersing van filters en mengmodi

Je hebt geleerd over de verschillende soorten CSS-filters en hoe je deze kunt toepassen op je HTML-elementen. Door verschillende filterfuncties te gebruiken, zoals vervagen, contrast en tintrotatie, kunt u het uiterlijk van uw afbeeldingen wijzigen. Je hebt ook voorbeelden gezien van overvloeimodi in actie en hoe ze kunnen worden gebruikt om unieke ontwerpen te maken.

Als u meer met deze technieken experimenteert, kunt u een extra niveau van visuele interesse toevoegen aan uw ontwerpen.