CSS mask

Má-li být na stránce nějaký obsah nepravidelných tvarů (něco jiného než obdélník), existují možnosti:

  • border-radius – zaoblené rohy, kterými jde vytvořit i kruh
  • clip – pomocí funkce polygon jde vytvořit nejrůznější oříznutí (Chrome 24+, Opera 15+)

CSS vlasnost mask se hodí pro vytvoření například obrázku s nepravidelným okrajem.

Obrázek s nepravidelným okrajem

Takový obrázek je sice možné natvrdo nakreslit, ale má to značné nevýhody:

  • Každý obrázek se bude muset odpovídajícím způsobem upravit.
  • Při změně tvaru bude nutné všechny obrázky přegenerovat.
  • Kombinovat na jednom obrázku souvislé plochy jedné barvy (okolí) a malé plochy různých barev (fotka) je nevýhoda z hlediska datové optimalisace obrázků. Ve formátu JPG bude přechod nekvalitní, v případě PNG bude datová velikost enormní.

Překrytí

Lepší řešení bez mask je tedy naposicování samotného okraje přes původní obrázek.

Příklad obrázku

V hodně případech si jde s takovým postupem vystačit, bohužel trpí docela vážným nedostatkem – okraj nemůže být průhledný – musí tam být nějaká barva, aby překryla obrázek. V případě webu s jednobarevným pozadím to nevadí, ale jinak to není ideální.

Oříznutí pomocí mask

Vlastnost mask všechny tyto problémy řeší. Bohužel v IE není podporována vůbec, ve Firefoxu podporuje pouze SVG a v Chrome/Opeře/Safari funguje částečně.

Kromě SVG a jiných obrázků jde použít i CSS gradient.

Zápis

CSS vlastnost mask je zkratkou pro různé další mask-* vlastnosti.

element {
  mask: url(maska.png);
}
  • mask-type – může mít hodnoty alpha a luminance, které stanovují způsob, kterým se určí obsah, který zůstane vidět (zdá se mi, že nic nedělá)
  • mask-image – obrázek, který se použije jako maska
  • mask-size – velikost masky (funguje podobně jako background-size)
  • mask-position, mask-repeat – stejné jako u background-*
  • mask-border – obdoba border-image

Živá ukázka (funguje jen v Chrome, nové Opeře apod.)

Textura

Kromě „oříznutí“ obsahu lze využít masku i k živému překrytí texturou.

Obrázek překrytý texturou

Výsledek v podporovaných prohlížečích:

Obrázek překrytý texturou

Živá ukázka

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS blend

CSS blend

CSS vlastnost background-blend-mode slouží ke smíchání barvy s obrázkem.

Image-rendering

Image-rendering

CSS vlastnost image-rendering ovlivňuje způsob, kterým se v prohlížeči zvětšují/zmenšují obrázky.

Background-clip

Background-clip

CSS vlastností background-clip jde omezit místo, kde zobrazí obrázek na pozadí.

Border-image

Border-image

CSS vlastnost border-image slouží k vytváření obrázkových rámečků.

Object-fit

Object-fit

CSS vlastnost object-fit umí přizpůsobit obrázek pevné velikosti.

Komentáře