CSS filtras ir maišymo režimai yra galingi įrankiai, leidžiantys lengvai pritaikyti nuostabius vaizdinius efektus jūsų tinklalapiui, nereikalaujant sudėtingo kodo.

CSS filtras ir maišymo režimai leidžia lengvai pritaikyti vaizdinius efektus jūsų tinklalapiui. Filtrai yra iš anksto nustatytų CSS funkcijų rinkinys, naudojamas vaizdų ar kitų HTML elementų atvaizdavimui reguliuoti. Nors maišymo režimai nustato, kaip elementas turi susilieti su fonu arba kaimyniniais elementais.

CSS filtrų naudojimas

CSS filtrus taikote naudodami filtras savybė ir ypatybė, nurodanti taikomo efekto tipą. Kiekviena filtro savybė yra CSS funkcija, kuri veikia panašiai kaip CSS kintamasis funkcija. Jis priima parametrą, nurodantį, kiek filtras turi paveikti stiliaus elementą.

Yra 10 CSS filtro funkcijų, skirtų HTML elemento stiliui sukurti:

  • blur ()
  • ryškumas ()
  • kontrastas ()
  • mesti šešėlį()
  • pilkos spalvos ()
  • atspalvis-pasukti ()
  • invert()
  • neskaidrumas ()
  • prisotintas ()
  • sepija ()

Šiuos filtrus galite naudoti atskirai arba kartu, kad sukurtumėte unikalius stilius ir pagerintumėte HTML elementų išvaizdą.

Kai kurie iš šių filtrų veikia daug geriau su kitais, kai naudojami tinkamai.

Čia pateikiami CSS filtrų derinimo pavyzdžiai, norint pasiekti skirtingus vaizdo elemento vaizdinius efektus.

1. Pilkos spalvos ir Sepija

The pilkos spalvos () filtras pašalina visą spalvų informaciją iš vaizdo ar teksto elemento. Filtras įgauna reikšmę nuo 0 iki 1, o 0 reiškia pradinę spalvą, o 1 reiškia visišką pilkos spalvos efektą.

The sepija () filtras vaizdui arba teksto elementui pritaiko sepijos atspalvio efektą. Filtras taip pat turi reikšmę nuo 0 iki 1.

Pavyzdžiui:

img {
filtras: pilkos spalvos tonai(14%) sepijos(30%);
}

Sujungimas pilkos spalvos () 14% ir sepija () 30% gali sukurti senovinį ar retro efektą jūsų įvaizdžiui.

2. Apverskite ir prisotinkite

The prisotintas () filtras padidina arba sumažina vaizdo arba teksto elemento sodrumą. Filtras turi reikšmę nuo 0 iki begalybės, o 1 yra pradinė spalva, o didesnės vertės didina sodrumą.

The invert() filtras apvers vaizdo ar teksto elemento spalvas apversdamas kiekvienos spalvos atspalvį 180 laipsnių spalvų ratuke. Tai reiškia, kad filtras keičia elemento šviesumo ir sodrumo lygius, išlaikydamas atspalvį.

Pavyzdžiui:

img {
filtras: apversti(30%) sočiųjų(75%);
}

Šis kodas apverčia vaizdo spalvas ir padidina sodrumą 75%.

3. Atspalvis – pasukimas ir kontrastas

The atspalvis-pasukti () filtras pasuka vaizdo arba teksto elemento atspalvius, o tai reiškia, kad keičia bendrą elemento spalvą, išlaikant ryškumo ir sodrumo lygius. Pasukimo dydis gali būti nurodytas laipsniais, 0 reiškia pradinę spalvą, o 360 reiškia visą pasukimą atgal į pradinę spalvą.

Sujungus atspalvis-pasukti () ir kontrastas () filtrai gali sukurti ryškų ir spalvingą jūsų vaizdų efektą.

Pavyzdžiui:

img {
filtras: atspalvis-pasukti(10deg) kontrastas(150%);
}

Hue-rotate gali priimti vertę deg, grad, rad, arba pasukti. Aukščiau pateiktas kodas pasuka vaizdo atspalvį 10 laipsnių ir padidina kontrastą.

4. Ryškumas ir suliejimas

Ryškumo ir suliejimo filtrai yra labai aiškūs. Pirmasis reguliuoja vaizdo ryškumą, o antrasis – suliejimo lygį.

Sujungus ryškumas () ir blur () filtrai gali sukurti svajingą ir švelnų jūsų vaizdų efektą.

Pavyzdžiui:

img {
filtras: ryškumą(0.8) sulieti(5px);
}

Aukščiau pateiktas kodas sumažina ryškumą 0.8 (80%) ir taiko a 5 piks vaizdo suliejimo efektas.

5. Drop-Shadow ir neskaidrumas

Nuleidžiamo šešėlio efektas yra vizualinis efektas, kai elementas meta šešėlį ant už jo esančio paviršiaus, suteikdamas gylio ir matmenų iliuziją. Kreipiantys šešėliai dažnai taikomi tekstui ar vaizdams, kad būtų sukurtas elemento ir fono atskyrimo pojūtis.

Tuo tarpu neskaidrumo filtras kontroliuoja elemento skaidrumą.

Sujungus mesti šešėlį() ir neskaidrumas () filtrai gali sukurti subtilų teksto elementų efektą.

Pavyzdžiui:

.teksto efektas {
transformuoti: išversti(-50%, -50%);
spalva: juodas;
mesti šešėlį: 10px 9px 9pxsmėlio spalvos;
neskaidrumas: 70%;
}

Šiame pavyzdyje krentantis šešėlis yra 10 pikselių dešinėje ir 9 pikselių apačioje, o suliejimo spindulys yra 9 pikseliai. Šešėlio spalva nurodyta kaip smėlio spalvos. Taip pat nurodytas 70 % neskaidrumas.

CSS maišymo režimų naudojimas

CSS maišymo režimai valdo, kaip elemento turinys susilieja su fonu ar kitais elementais, kad būtų sukurti kūrybingi kompozicijos efektai.

Kai kurie iš populiariausių CSS maišymo režimų naudojimo atvejų yra šie:

  • Gradientų kūrimas: Kuriant galima naudoti maišymo režimus keli CSS fono gradientai kad perėjimas tarp spalvų, suteikdamas jums paprastą ir efektyvų būdą savo dizainui suteikti gylio ir matmenų.
  • Tekstūros pridėjimas: Taip pat galite naudoti maišymo režimus, kad pridėtumėte tekstūros prie fono, vaizdų ir kitų puslapio elementų. Tai gali būti puikus būdas sukurti unikalų vaizdą ir pridėti vizualinio susidomėjimo paprastais elementais.
  • Spalvų reguliavimas: Naudodami maišymo režimus galite reguliuoti puslapio elementų spalvas, įskaitant reguliuoti fono spalvas. Tai leis lengvai sukurti efektus, pvz., spalvų perdangas arba atspalvius.

Du dažniausiai naudojami maišymo režimai fono maišymo režimas ir maišymo-maišymo režimas. Abi ypatybės turi tas pačias 15 reikšmių: normalus, daugintis, ekranas, perdengimas, tamsinimas, pašviesinimas, spalvų mažinimas, sodrumas, spalvų įdegimas, šviesumas, skirtumas, kietas apšvietimas, švelnus apšvietimas, išskyrimas ir atspalvis.

Turėtumėte naudoti fono maišymo režimas kai turite kelis fono išdėstymus, pvz., elemento fono vaizdus, ​​ir norite, kad jie visi susilietų vienas į kitą.

Taip pat galėtumėte naudoti maišymo-maišymo režimas sumaišyti tam tikro elemento turinį su jo tiesioginio pirminio elemento turiniu. The maišymo-maišymo režimas paprastai naudojamas priekinio plano turiniui, pvz., tekstui, figūroms ar vaizdams, sujungti.

Štai naudojimo pavyzdys maišymo-maišymo režimas sulieti tekstą ir vaizdą.

HTML:

<divklasė="konteineris">
<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="fono vaizdas"
 />
<divklasė="turinys">
<h1>Sveikih1>
<p>Sveiki Vartotojas!p>
div>
div>

CSS:

.konteineris {
padėtis: absoliutus;
plotis: 100%;
aukščio: 100%;
}
.fono vaizdas {
plotis: 100%;
aukščio: 100%;
tinkamas objektui: viršelis;
}


.turinys {
padėtis: absoliutus;
viršuje: 50%;
paliko: 50%;
transformuoti: išversti(-50%, -50%);
teksto lygiavimas: centras;
maišymo-maišymo režimas: skirtumas;
}


h1 {
šrifto dydis: 60px;
spalva: baltas;
}
p {
šrifto dydis: 40px;
spalva: baltas;
}

The skirtumas maišymo režimas apskaičiuoja absoliutų skirtumą tarp teksto ir pagrindinio tamsaus vaizdo spalvų verčių.

Pagal šį scenarijų teksto spalva sąveikautų su tamsiu fonu, o tai sukeltų didelio kontrasto efektą.

Filtrų ir maišymo režimų derinimas

Galite derinti filtrus ir maišymo režimus, kad sukurtumėte dar vizualiai įdomesnius efektus. Naudodami abi ypatybes kartu galite pasiekti unikalių ir kūrybingų rezultatų, kuriuos sunku pakartoti su kitomis CSS ypatybėmis.

Štai pavyzdys, kuris sujungia filtrą ir maišymo režimą, kad sukurtų sudėtingesnį efektą:

.mano elementas {
filtras: ryškumą(150%) atspalvis-pasukti(180deg) mesti šešėlį(0px 0px 10pxrgba(0, 0, 0, 0.5));
maišymo-maišymo režimas: ekranas;
}

Šis kodas sujungia filtrus; ryškumą, atspalvis-pasukti, mesti šešėlį, ir a maišymo-maišymo režimas vertės ekranas į vaizdą. Jis padidina ryškumą 150%, o hue-pasukti apvers vaizdo spalvas 180 laipsnių kampu.

Tada taip pat taikomas šešėlis. Galiausiai, ekranas maišymo režimo vertė sujungs vaizdo spalvas su pagrindiniu fonu, Dėl to gaunamas efektas, kai šviesesnės spalvos suintensyvėja, o tamsesnės spalvos sumaišomos su fone.

Įvaldykite filtrus ir maišymo režimus

Sužinojote apie skirtingus CSS filtrų tipus ir kaip galite juos pritaikyti savo HTML elementams. Naudodami įvairias filtro funkcijas, tokias kaip suliejimas, kontrastas ir atspalvių pasukimas, galite keisti vaizdų išvaizdą. Taip pat matėte veikiančių maišymo režimų pavyzdžių ir kaip juos naudoti kuriant unikalų dizainą.

Jei daugiau eksperimentuosite su šiais metodais, savo dizainui galite suteikti papildomo vizualinio susidomėjimo.