Домашня » Веб дизайн » Відбиття зображення CSS3 [Поради CSS3]

    Відбиття зображення 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

    с moz-задуматися id;

     

    І, щоб провести рефлексію, ми використаємо : після псевдоелемент, наступним чином;

     # moz-reflect: after content: ""; дисплей: блок; background: -moz-елемент (# moz-reflect) не повторюється; width: auto; висота: 375px; margin-bottom: 100px; -moz-transform: scaleY (-1);  

    The -moz-transform з негативною шкалою використовується для перевертання збудованого об'єкта вгору-вниз. Також переконайтеся, що висота досить точний до реального об'єкта висота щоб уникнути зайвих додаткових ліній для позиціонування відображення.

    На жаль, досі не існує легкого способу створення приємно Ефект відображення в Firefox за допомогою цієї практики. Наведений вище код просто створить відображення без ефекту вицвітання.

    Кредит: Дивні Bedfellows
    • Переглянути демонстрацію
    • Завантажити джерело

    Подальші посилання

    • Керівництво з візуальних ефектів Safari CSS
    • Mozilla element () Документація