CSS3 Box Reflection

Prohlížeč vykreslí zrcadlový odlesk pod objektem nebo z jeho strany.

Syntaxe

Syntaxe pro prohlížeče postavené na Webkit jádře:

-webkit-box-reflect:
  _směr_odlesku
  _posun_
  _maska_;

Směr odlesku

Povinná položka, která může nabývat hodnot above, below, left nebo right.

-webkit-box-reflect: below;

Posun

Jak moc se odlesk vzdálí od původního objektu. Uvádí se v běžných CSS jednotkách – px, em a dalších.

-webkit-box-reflect: below 5px;

Maska

Maska určuje efekt překrytí odlesku. Pro zajištění zrcadlového efektu maskou bývá CSS gradient. Může to být ale i obrázek. Co je v masce černé, zobrazí se; co je průhledné, nezobrazí se.

-webkit-box-reflect:
  below 5px linear-gradient(to bottom, transparent, black);

Živá ukázka příkladu je na cdpn.io/e/CLEhF.

Podpora v prohlížečích

Jen prohlížeče postavené na Webkit jádře. Ke dnešku tedy funguje ve všech Safari i Android Browseru. Dokonce ve všech Chrome, i když už dnes běží na vlastním jádře Blink. caniuse.com/box-reflect

Ve Firefoxu lze odlesku dosáhnout pomocí vlastnosti -moz-element(). vrdl.in/yboz2

Na vlastnost se tedy nelze spolehnout na široce dostupných webech, ale pro interní aplikace s omezenou cílovou skupinou se může hodit.