CSS3 Отражение изображения [CSS3 Советы]
До сих пор мы обсудили много новых свойств в CSS3. Помимо этого, на самом деле есть несколько других свойств, которые в настоящее время не включены в официальные спецификации CSS3, которые стоит попробовать, одним из которых является коробчатого отражают свойство, которое инициируется Webkit. Это свойство может отражаться на указанных объектах.
Основное отражение
Базовая реализация довольно интуитивна; скажем, мы хотим отражение ниже реального объекта. Мы можем написать:
img -webkit-box-refle: ниже;
Этот пример показывает, как мы отражаем изображение ниже (позиция) объекта. Но в этом случае мы также можем держать отражение в право, оставил, а также выше.
Отражение смещения
офсет используется для определения зазора между отражением и отраженным реальным объектом. Давайте посмотрим на фрагмент кода ниже;
img -webkit-box-рефлекс: ниже 10 пикселей;
В приведенном выше коде мы отделили отражение от реального объекта 10px;
- Посмотреть демо
Маскировка с градиентами
Эффект отражения, который мы обычно видим, - это затухание внизу и отображение только половины или менее реального объекта. Чтобы повторить этот вид эффекта, мы можем применить CSS3 градиенты маскировать объект, вот так;
-webkit-box-отражение: ниже 0px -webkit-градиент (линейный, слева вверху, слева внизу, от (прозрачный), до (rgba (250, 250, 250, 0.1)));
Этот код приведет к следующей презентации;
Мы также можем использовать цвет-стоп управлять переходами и придавать отражению приятный вид:
img -webkit-box-отражение: ниже 0px -webkit-градиент (линейный, левый верхний, левый нижний, от (прозрачный), color-stop (70%, прозрачный), до (rgba (250, 250, 250, 0,1) )));
- Посмотреть демо
Альтернативы для Firefox
Однако в настоящее время это свойство работает только в браузерах Webkit (то есть Safari и Chrome). Чтобы добиться того же эффекта в Firefox, вам нужен другой маршрут: использование -Мос-элемент () функция. Эта функция по существу будет генерировать или копировать контент из определенных элементов HTML. Давайте посмотрим на следующий пример;
У нас есть изображение, завернутое в И, чтобы удержать отражение, мы будем использовать К сожалению, до сих пор нет простого способа создать отлично эффект отражения в Firefox, используя эту практику. Код выше просто создаст отражение, без эффекта затухания.Мос-отражения Я бы;
:после Псевдо-элемент, следующее; # moz-refle: after content: ""; дисплей: блок; background: -moz-element (# moz-refle) no-repeat; ширина: авто; высота: 375 пикселей; нижнее поле: 100px; -moz-transform: scaleY (-1);
-Мос-преобразования с отрицательной шкалой используется для переворачивания сгенерированного объекта в обратном порядке. Кроме того, убедитесь, что рост достаточно точен для реального объекта рост чтобы избежать ненужных лишних линий для позиционирования отражения.Дальнейшие ссылки
