CSS-filtret och blandningslägena är kraftfulla verktyg för att enkelt applicera fantastiska visuella effekter på din webbsida utan behov av komplex kod.

CSS-filtret och blandningslägena låter dig enkelt applicera visuella effekter på din webbsida. Filter är en uppsättning fördefinierade CSS-funktioner som används för att justera renderingen av bilder eller andra HTML-element. Medan blandningslägen bestämmer hur ett element ska blandas med dess bakgrund eller angränsande element.

Använder CSS-filter

Du använder CSS-filter med hjälp av filtrera egenskap och en egenskap som anger den tillämpade effekttypen. Varje filteregenskap är en CSS-funktion, dvs fungerar på samma sätt som en CSS-variabel fungera. Den accepterar en parameter för att specificera hur mycket filtret ska påverka det formaterade elementet.

Det finns 10 CSS-filterfunktioner tillgängliga för att utforma ditt HTML-element:

  • fläck()
  • ljusstyrka()
  • kontrast()
  • drop-shadow()
  • gråskala()
  • nyans-rotera()
  • invertera()
  • opacitet()
  • mätta()
  • sepia()

Du kan använda dessa filter individuellt eller i kombination för att skapa unika stilar och förbättra utseendet på dina HTML-element.

instagram viewer

Vissa av dessa filter fungerar mycket bättre med andra när de används på rätt sätt.

Här är exempel på att kombinera CSS-filter för att uppnå olika visuella effekter på ett bildelement.

1. Gråskala och Sepia

De gråskala() filter tar bort all färginformation från en bild eller ett textelement. Filtret tar ett värde mellan 0 och 1, där 0 betyder originalfärgen och 1 är hela gråskaleeffekten.

De sepia() filter tillämpar en sepia-toneffekt på en bild eller ett textelement. Filtret tar också ett värde mellan 0 och 1.

Till exempel:

img {
filtrera: gråskala(14%) sepia(30%);
}

Kombinerande gråskala() på 14 % och sepia() vid 30% kan skapa en vintage- eller retroeffekt på din bild.

2. Invertera och mätta

De mätta() filter ökar eller minskar mättnaden för en bild eller ett textelement. Filtret tar ett värde mellan 0 och oändligt, där 1 är den ursprungliga färgen och högre värden ökar mättnaden.

De invertera() filtret inverterar färgerna på en bild eller ett textelement genom att vända nyansen på varje färg som finns 180 grader på färghjulet. Detta innebär att filtret ändrar ljusstyrkan och mättnadsnivåerna för elementet samtidigt som nyansen bibehålls.

Till exempel:

img {
filtrera: invertera(30%) mätta(75%);
}

Denna kod inverterar bildens färger och ökar mättnaden med 75 %.

3. Nyans-rotera och kontrast

De nyans-rotera() filtret roterar nyanserna i ett bild- eller textelement, vilket innebär att det ändrar elementets övergripande färg samtidigt som ljusstyrkan och mättnadsnivåerna bibehålls. Mängden rotation kan anges i grader, där 0 representerar den ursprungliga färgen och 360 representerar en hel rotation tillbaka till den ursprungliga färgen.

Att kombinera nyans-rotera() och kontrast() filter kan skapa en levande och färgstark effekt på dina bilder.

Till exempel:

img {
filtrera: nyans-rotera(10deg) kontrast(150%);
}

Hue-rotate kan acceptera ett värde på deg, grad, rad, eller sväng. Ovanstående kod roterar bildens nyans med 10 grader och höjer kontrasten.

4. Ljusstyrka och oskärpa

Filtren för ljusstyrka och oskärpa är mycket självförklarande. Den första justerar ljusstyrkan på din bild, och den senare styr nivån av oskärpa som tillämpas.

Att kombinera ljusstyrka() och fläck() filter kan skapa en drömsk och mjuk effekt på dina bilder.

Till exempel:

img {
filtrera: ljusstyrka(0.8) fläck(5px);
}

Ovanstående kod minskar ljusstyrkan med 0.8 (80%) och tillämpar a 5 px oskärpa effekt på bilden.

5. Drop-Shadow och Opacitet

En skuggeffekt är en visuell effekt där ett element verkar kasta en skugga på ytan bakom det, vilket ger en illusion av djup och dimensionalitet. Skuggor appliceras ofta på text eller bilder för att skapa en känsla av separation mellan elementet och bakgrunden.

Samtidigt styr opacitetsfiltret ett elements genomskinlighet.

Att kombinera drop-shadow() och opacitet() filter kan skapa en subtil effekt på dina textelement.

Till exempel:

.text-effekt {
omvandla: Översätt(-50%, -50%);
Färg: svart;
skugga: 10px 9px 9pxbeige;
opacitet: 70%;
}

I det här exemplet är skuggan placerad 10 pixlar till höger och 9 pixlar till botten, med en oskärpa radie på 9 pixlar. Skuggfärgen anges som beige. En opacitet på 70 % anges också.

Använda CSS-blandningslägen

CSS-blandningslägen styr hur ett elements innehåll blandas med bakgrunden eller andra element, vilket möjliggör kreativa kompositionseffekter.

Några av de mest populära användningsfallen för CSS-blandningslägen inkluderar:

  • Skapa gradienter: Blandningslägen kan användas för att skapa flera CSS-bakgrundsgradienter den övergången mellan färger, vilket ger dig ett enkelt och effektivt sätt att lägga till djup och dimension till dina mönster.
  • Lägger till textur: Du kan också använda blandningslägen för att lägga till textur till bakgrunder, bilder och andra element på en sida. Detta kan vara ett bra sätt att skapa ett unikt utseende och lägga till visuellt intresse till annars enkla element.
  • Justera färger: Med blandningslägen kan du justera färgerna på element på en sida, inklusive justera bakgrundsfärger. Detta gör att du enkelt kan skapa effekter som färgöverlägg eller tonade bilder.

De två vanligaste blandningslägena är bakgrundsblandningsläge och mix-blandning-läge. Båda egenskaperna delar samma 15 värden: normal, multiplicera, skärm, överlägg, mörkare, ljusare, färg-undvika, mättnad, färgbränning, ljusstyrka, skillnad, hårt ljus, mjukt ljus, uteslutning och nyans.

Du bör använda bakgrundsblandningsläge när du har flera bakgrundslayouter, som bakgrundsbilder på ett element, och vill att alla ska smälta in i varandra.

Du kan också använda mix-blandning-läge att blanda innehållet i ett givet element med innehållet i dess direkta överordnade. De mix-blandning-läge används vanligtvis för att blanda förgrundsinnehåll som text, former eller bilder.

Här är ett exempel på användning mix-blandning-läge att blanda text och bild.

HTML:

<divklass="behållare">
<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"
 />
<divklass="innehåll">
<h1>Välkommenh1>
<sid>Hej användare!sid>
div>
div>

CSS:

.behållare {
placera: absolut;
bredd: 100%;
höjd: 100%;
}
.bakgrundsbild {
bredd: 100%;
höjd: 100%;
objektpassning: omslag;
}


.innehåll {
placera: absolut;
topp: 50%;
vänster: 50%;
omvandla: Översätt(-50%, -50%);
textjustera: Centrum;
mix-blandning-läge: skillnad;
}


h1 {
textstorlek: 60px;
Färg: vit;
}
sid {
textstorlek: 40px;
Färg: vit;
}

De skillnad blandningsläget beräknar den absoluta skillnaden mellan färgvärdena för texten och den underliggande mörka bilden.

I det här scenariot skulle textfärgen interagera med den mörka bakgrunden, vilket resulterar i en hög kontrasteffekt.

Kombinera filter och blandningslägen

Du kan kombinera filter och blandningslägen för att skapa ännu mer visuellt intressanta effekter. Genom att använda båda egenskaperna tillsammans kan du uppnå unika och kreativa resultat som är svåra att replikera med andra CSS-egenskaper.

Här är ett exempel som kombinerar filter- och blandningsläget för att skapa en mer komplex effekt:

.mitt element {
filtrera: ljusstyrka(150%) nyans-rotera(180deg) skugga(0px 0px 10pxrgba(0, 0, 0, 0.5));
mix-blandning-läge: skärm;
}

Denna kod kombinerar filtren; ljusstyrka, nyans-rotera, skugga, och en mix-blandning-läge av värde skärm till bilden. Den ökar ljusstyrkan med 150 %, medan hue-rotera inverterar bildens färger 180 grader.

Sedan appliceras också en skugga. Slutligen skärm värdet för blandningsläget kommer att kombinera färgerna på bilden med den underliggande bakgrunden, vilket resulterar i en effekt där ljusare färger intensifieras och mörkare färger blandas med bakgrund.

Bemästra filter och blandningslägen

Du har lärt dig om de olika typerna av CSS-filter och hur du kan tillämpa dem på dina HTML-element. Genom att använda olika filterfunktioner som oskärpa, kontrast och nyansrotering kan du ändra utseendet på dina bilder. Du har också sett exempel på blandningslägen i aktion och hur de kan användas för att skapa unika mönster.

Om du experimenterar mer med dessa tekniker kan du lägga till en extra nivå av visuellt intresse för dina mönster.