Эффект отражения в CSS3 на картинку (-webkit-box-reflect).

Эффект отражения в CSS3 на картинку (-webkit-box-reflect).

Отражение задается так:
-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*/

Примеры:

city
kick

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

| | Эффект отражения в CSS3 на картинку (-webkit-box-reflect). | Отражение задается так: -webkit-box-reflect: below; Направления отражений со смещением от оригинала: -webkit-box-reflect: above 20px;/*вверх*/ - |

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>