CSS3 Reflection

Zrcadlení elementu

IE6
IE7
IE8
IE9
Firefox
Chrome
Opera
Safari
MobileSafari
AndroidBrowser

Poznámka: Šířka boxů vyznačuje podíl prohlížeče na návštěvnosti českých webů podle Rankings.cz z června 2012.

Zrcadlení je jedna z „Webkit vychytávek“. Hodí se tedy jen v situacích kdy nevadí nepřítomnost efektu v ostatních prohlížečích. Ta může nastat třeba u webů pro mobilní zařízení.

Základní syntaxe podle W3C bez prefixových variant

-webkit-box-reflect: _smer_ _posun_ _maska_;

Příklad

Boxík bude mít pod sebou zrcadlící obraz.

#reflect-example {
  -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
  margin-bottom: 100px;
  overflow: visible;
}