Mask a clipping v CSS

Pokud jste pracovali s editací fotek nebo v některém pokročilejším grafickém editoru, určitě jste se setkali s pojmem "maska" nebo "clipping" (vystřižení). Obě operace ovlivňují, které části výsledného obrázku budou viditelné a které ne. Ani jedna z operací není destruktivní. To znamená, že původní obrázek zůstane, změní se pouze způsob jeho vykreslení.

Clipping

Operace clipping definuje tvar nebo cestu, která bude z celku vystřižena. V CSS je definovaná pomocí pravidel clip a clip-path.

Pravidlo clip je starší implementace a umožňuje pouze obdélníkový ořez. Navíc pouze na absolutně pozicovaných prvcích, což na už tak omezeném využití moc nepřidá.

Oproti tomu clip-path lze aplikovat na jakékoliv HTML nebo SVG elementy. Jako "šablonu" pro vystřižení bere buďto SVG soubor s definovaným <clipPath> tvarem nebo některý ze základních CSS tvarů (např. kruh, elipsa, polygon).

img.stenatko {
  /* U kruhu se uvádí hodnota poloměru a pozice středu */
  clip-path: circle(50% at 50% 50%);
}

img.stenatko {
  /* Pro polygon se uvádí souřadnice jednotlivých bodů */
  clip-path: polygon(0 43%, 0 19%, 21% 0, 38% 8%, ...);
}

Pozn.: pro vytváření vlastních CSS tvarů doporučuji nástroj clippy.

Pravidlo clip-path lze také animovat přes CSS animace nebo pravidlo transition. Ukázku si můžete prohlédnout zde.

Podpora clip-path mimo IE a Edge je relativně dobrá. Pouze Safari vyžaduje prefix.

Maska

Operace mask dělá podobnou věc, jako clipping, ale trochu jinak. Místo, aby vyřízla obrázek podle určitého tvaru, vezme jiný obrázek, který slouží jako „síto“ a aplikuje jej na původní obrázek. Co neprojde „sítem“, nebude ve výsledku vidět.

Existují dva typy masek, podle toho jakou vlastnost „síta“ používají: jas (luminance mask) nebo průhlednost (alpha mask). Nás zajímá především maska průhlednosti, protože pouze ta je momentálně prohlížeči podporovaná.

Tato maska funguje tak, že se z původního obrázku zobrazí pouze ta oblast, která je v masce neprůhledná. Záleží tedy pouze na průhlednosti. Čím průhlednější je oblast v masce, tím průhlednější bude ve výsledném obrázku/elementu. Masky oproti clippingu tím pádem mohou vytvářet přechody do průhlednosti.

Zleva: původní obrázek, maska (bílá je průhlednost), výsledný obrázek

V CSS masku definuje zkratkové pravidlo mask. To je podobné pravidlu background a stejně tak je složeno z dílčích pravidel: mask-image, mask-repeat, mask-size, mask-position, mask-clip a mask-origin. Stejně jako u background lze definovat více masek s různými pozicemi na jeden element. Ty pak budou aplikovány postupně. Po aplikaci masky je krytý veškerý obsah a prvky elementu včetně hodnot pravidla background. 

Zdroj masky je definován pravidlem mask-image a může jím být jakýkoliv JPG, PNG či SVG obrázek nebo CSS přechod.

img.stenatko {
  /* Aplikuje masku přes celý obrázek */
  mask: url(maska.png) no-repeat center/cover;
}

Aplikace CSS masky

Aplikovaná maska (maska.png)

S pomocí CSS masky lze vytvořit například falešný efekt hloubky obrázku nebo další zajímavé efekty.

Podpora prohlížečů je podobná, jako u clip-path. S tím rozdílem, že prefix zatím vyžadují všechny Webkit prohlížeče a v Edge lze zapnout experimentálním flagem. Pro více informací doporučuji MDN dokumentaci nebo tento článek na html5rocks.

---

Používáte na svém projektu masky nebo clip? Víte o nějaké zajímavé aplikaci těchto vlastností? Podělte se s námi v komentářích.