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.
Poznámka: Ukázky kódu v článku obsahují pouze standardní syntaxi podle CSS3 norem. Ve některých případech je potřeba použít vendor prefix varianty. Na aktuální situaci se podívejte na shouldiprefix.com.