CSS3 Box Reflection

Naposledy upraveno: 1. 8. 2013 – Autor: Martin Michálek

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

Syntaxe

  • Horňák nebo dolňák? JS frontend nebo backend? U nás si vybírat nemusíš!

    Etnetera, Praha 

-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.

Komentáře