Отражение задается так:
-webkit-box-reflect: below;
Направления отражений со смещением от оригинала:
-webkit-box-reflect: above 20px;/*вверх*/
-webkit-box-reflect: below -20px; /*вниз*/
-webkit-box-reflect: left 20px;/*влево*/
-webkit-box-reflect: right 20px;/*вправо*/
Можно добавить градиент:
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white)); /*сверху вниз, от полной прозрачности до белого цвета*/
Добавляем высоту отражения:
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(white)); /*50%*/
Добавляем прозрачность к градиенту:
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.2))); /*50%, 0.2*/
Примеры:


Скачать описанный пример выше
Добавить комментарий