Відбиття зображення CSS3 [Поради CSS3]
До цих пір ми обговорили багато нових властивостей в Росії CSS3. Крім того, існує кілька інших властивостей, які зараз не включені до офіційних специфікацій CSS3, які варто спробувати, один з яких - коробка-відбиває майно, яке ініціюється Webkit. Це властивість може відображати вказані об'єкти.
Базове відображення
Основна реалізація досить інтуїтивна; скажімо, ми хочемо відображення нижче реального об'єкта. Ми можемо написати:
img -webkit-box-відображає: нижче;
Цей приклад показує, як ми відображаємо зображення нижче (позиція) об'єкта. Але, в даному випадку, ми можемо також провести рефлексію до право, зліва, і вище.
Зміщення відображення
Зсув використовується для визначення розриву між відображенням і реальним відображеним об'єктом. Давайте розглянемо фрагмент коду нижче;
img -вебкіт-бокс-відображає: нижче 10px;
У наведеному вище коді ми розділили відображення від реального об'єкта 10px;
- Переглянути демонстрацію
Маскування з градієнтами
Ефект віддзеркалення, який ми часто бачимо, - це затухання внизу і відображення лише половини або менше реального об'єкта. Щоб скопіювати цей вид ефекту, ми можемо застосувати його Градієнти CSS3 щоб маскувати об'єкт, подібно до цього;
-webkit-box-відображає: нижче 0px -вебкіт-градієнт (лінійний, лівий верхній, лівий нижній, від (прозорий), до (rgba (250, 250, 250, 0.1)));
Цей код призведе до наступної презентації;
Ми також можемо використовувати колір-стоп керувати переходами та зробити відображення краще:
img -webkit-box-reflective: нижче 0px -вебкіт-градієнт (лінійний, лівий верхній, лівий нижній, (прозорий), колір-стоп (70%, прозорий), до (rgba (250, 250, 250, 0,1) )));
- Переглянути демонстрацію
Альтернативи для Firefox
Проте ця властивість працює лише в браузерах Webkit (тобто у Safari та Chrome). Щоб отримати такий самий ефект у Firefox, потрібен інший маршрут: використання -moz-element () функції. Ця функція по суті буде генерувати або копіювати вміст з певних елементів HTML. Давайте розглянемо наступний приклад;
У нас є зображення, загорнуте в a І, щоб провести рефлексію, ми використаємо The На жаль, досі не існує легкого способу створення приємно Ефект відображення в Firefox за допомогою цієї практики. Наведений вище код просто створить відображення без ефекту вицвітання.moz-задуматися id;
: після псевдоелемент, наступним чином; # moz-reflect: after content: ""; дисплей: блок; background: -moz-елемент (# moz-reflect) не повторюється; width: auto; висота: 375px; margin-bottom: 100px; -moz-transform: scaleY (-1);
-moz-transform з негативною шкалою використовується для перевертання збудованого об'єкта вгору-вниз. Також переконайтеся, що висота досить точний до реального об'єкта висота щоб уникнути зайвих додаткових ліній для позиціонування відображення.Подальші посилання
