CSS Režim Mešanja

Obično, kada dodamo sliku na veb lokaciju, prvo što uradimo je da je uredimo u spoljnom softveru, kao što je Photoshop. Da li režim mešanja eliminiše potrebu za korišćenjem ove vrste softvera? Ne baš. Ali, u mnogim slučajevima ćete moći da dodate efekte na sliku direktno pomoću CSS-a .

Kada kreirate svoj dizajn, trebalo bi da sledite neke savete iz najbolje prakse .

Režim mešanja s Pozadinom i Mix Režim mešanja

Kada koristite svojstvo background-blend-mode , možete spojiti boju pozadine ili sliku elementa. Režimi mešanja definisani su kao vrednost i oni određuju kako da mešaju ili mešaju boje pozadinske slike sa bojom ili drugim pozadinskim slikama iza nje.

S druge strane, svojstvo mix-blend-mode specificira kako se sadržaj elementa stapa sa njegovom pozadinom i sadržajem njegovog direktnog roditelja. Elementi na preklapajućim slojevima će se stopiti sa onima ispod njega. U ovom slučaju, važno je spomenuti izolacijsko svojstvo. Zaustavlja mešanje elemenata sa mix-blend-property sa pozadinom.

Režim mešanja s Pozadinom

Pokažimo osnovnu upotrebu background-blend-mode mešanjem pozadinske slike sa bojom pozadine.

CSS

.image-blend{
  background: url(‘beach.png’);
  background-color: blue;
  background-blend-mode: multiply;
}

Na vrhu vidimo originalnu sliku, dok je na dnu slika sa mešovitim režimom primenjenim na nju.

Prvo treba navesti URL slike u pozadini , a zatim boju pozadine sa kojom će se slika spojiti. Na raspolaganju je mnogo načina mešanja, ovde je dodan režim višestrukog mešanja kako bi se pokazalo kako će uticati na sliku. Zajedno sa čvrstom bojom pozadine, za mešanje se može koristiti i gradijent pozadine.

Sada, pogledajmo kako možemo da koristimo režim mešanja u pozadini za mešanje dve slike zajedno . Spojićemo sledeće dve slike zajedno:

CSS

.two-images-blend {
  background: url(‘beach.png’), url(‘house.png’);
  background-color: blue;
  background-blend-mode: lighten;
}

CSS

.two-images-blend {
  background: url(‘beach.png’), url(‘house.png’);
  background-blend-mode: lighten;
}

U ovom slučaju imamo dva primera, gde je prvom dodata boja pozadine, dok drugi nema boju pozadine.

Pokazali smo dve moguće vrednosti za režim mešanja u pozadini, ali ima ih mnogo:

• screen,
• overlay,
• darken,
• lighten,
• color-dodge,
• color-burn,
• hard-light,
• soft-light,
• difference,
• exclusion,
• hue,
• saturation,
• color and
• luminosity.

Mix Režim mešanja

Popularna upotreba ovog efekta je stvaranje isečenog teksta . Kada to radite, korisno je imati na umu upotrebu svojstva line-height .

HTML

<div class=”container”>
  <h1 class=”header-text”>Hello world</h1>
</div>

CSS

.container {
  background-image: url(‘beach.png’);
  background-size: cover;
}

.header-text {
  font-size: 7rem;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  background-color: darkcyan;
  mix-blend-mode: multiply;
}

Podrška

Pre upotrebe ovog svojstva, obavezno proverite Can I Use za više detalja o podršci za ova svojstva. Trenutno svojstvo background-blend-mode ima malo bolju podršku, nadamo se da će mix-blend-mode uskoro stići.

Rezime

Objasnili smo osnove ova dva svojstva, sada je na vama da se poigrate njima i napravite lepe i zanimljive vizuelne prikaze za svoju veb stranicu.

Ako vam se svideo ovaj članak, obavezno se pretplatite na naš bilten - ima još mnogo toga!