CSS Відбиття зображення
В цьому розділі ви дізнаєтесь, як відобразити відбиття зображення.
CSS Відбиття зображення
Властивість box-reflect використовується для створення відбиття зображення.
Значення властивості box-reflect може бути: below, above, left або right.
Підтримка браузерами
Числа в таблиці вказують першу версію браузера, яка повністю підтримує властивість.
Цифри, за якими слідує -webkit-, вказують першу версію, яка працювала з префіксом.
| Властивість | |||||
|---|---|---|---|---|---|
| box-reflect | 4.0 -webkit- | 79.0 -webkit- | Не підтримується | 4.0 -webkit- | 15.0 -webkit- |
Приклади
Приклад
Тут нам потрібно відбиття під зображенням:
img {
-webkit-box-reflect: below;
}
Спробуйте самі »
Приклад
Тут ми хочемо, щоб відбиття було праворуч від зображення:
img {
-webkit-box-reflect: right;
}
Спробуйте самі »
CSS Зміщення відбиття
Щоб вказати прозір між зображенням і відбиттям, додайте розмір прозіру у властивість box-reflect.
Приклад
Тут нам необхідно відбиття під зображенням зі зміщенням 20 пікселів:
img {
-webkit-box-reflect: below 20px;
}
Спробуйте самі »
CSS Відбиття з градієнтом
Ми також можемо створити ефект затухання на відбитті.
Приклад
Створіть ефект затемнення (затухання) на відбитті:
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
Спробуйте самі »
