CSS: Maskiranje slike

Maskiranje slike, natančneje CSS funkcija “mask-image” nam omogoča, da klasičnem postavitvam s slikami dodamo karakter.

Maskiranje nam pride prav, kadar želimo doseči malo drugačne postavitve vsebine, tako da slika ni v klasični obliki, kot je kvadrat, pravokotnik. Maskiranje lahko uporabimo skozi en element ali pa slednjega ponavljamo, da dobimo vzorec. Za lažje predstavo sem spodaj pripravil primer.

See the Pen
CSS: Maskiranje slike
by Ziga (@pomagalnik)
on CodePen.

V praksi lahko takšne postavitve dosežemo tudi tako, da slike predhodno maskiramo v grafičnih programih. Vendar tak pristop ni sistemski, zato je vedno boljše poiskati sistemsko rešitev, ki določene zadeve avtomatizira, predvsem pa poenostavi. “mask-image” je precej dobro podprt, podpirajo ga praktično vsi večji brskalniki. Tako lahko s to funkcijo že eksperimentirate pri naslednjem projektu.

Komentiraj


*