Мы уже рассказывали о разных свойствах CSS3. Кроме этого есть еще свойства, которые пока что не включены в официальные спецификации CSS3, но которые стоит попробовать применить, и одно из таких свойств — box-reflect, которое введено для движка Webkit. Это свойство может создавать отражение указанных объектов.

Простейшее отражение

Простейшее применение интуитивно понятно. Допустим, мы хотим создать отражение под реальным объектом. Мы можем написать:

img {
    -webkit-box-reflect: below;
}

(Источник изображения: Eight Weeks Of Bruce)

Этот пример показывает, как мы можем создать отражение, расположенное под объектом. Но таким образом мы также можем разместить отражение справа, слева или выше объекта, используя псевдоклассы right, left, и above соответственно.

Смещение отражения

Смещение используется, чтобы определить размер промежутка между отражением и реальным отражаемым объектом. Давайте рассмотрим отрывок кода ниже:

img {
    -webkit-box-reflect: below 10px;
}

В отрывке кода выше мы отдалили отражение от реального объекта на 10px:

(Источник изображения: Eight Weeks Of Bruce)

Демонстрация работы

Маскировка с помощью градиентов

Эффект отражения, который мы часто видим, — это исчезание снизу и показ только половины или меньше реального объекта. Чтобы повторить такой эффект, мы можем применить градиенты CSS3 для маскировки объекта, например так:

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottombottom, from(transparent), to(rgba(250, 250, 250, 0.1)));

Результаты работы этого кода будут выглядеть так:

(Источник изображения: What’s Liberal About The Liberal Arts?)

Еще мы можем использовать свойство color-stop, чтобы контролировать переходы и чтобы отражение выглядело приятней:

img {
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottombottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));
}

(Источник изображения: Everything Matters!)

Демонстрация работы

Вариант для браузера Firefox

Впрочем, пока что это свойство работает только в браузерах с движком Webkit, таких как Safari и Chrome. Чтобы создать такой же эффект в браузере Firefox, Вам понадобится другой способ: использование функции -moz-element(). Эта функция по сути создаст или скопирует содержимое из определенных элементов HTML. Давайте рассмотрим следующий пример.

У нас есть изображение внутри блока с идентификатором moz-reflect:

<div id="moz-reflect">
    <img src="images/everything_matters.large.jpg">
</div>

И, чтобы разместить отражение, мы используем псевдоэлемент :after следующим образом:

#moz-reflect:after {
    content: "";
    display: block;
    background: -moz-element(#moz-reflect) no-repeat;
    width: auto;
    height: 375px;
    margin-bottom: 100px;
    -moz-transform: scaleY(-1);
}

Свойство -moz-transform с негативным масштабированием используется, чтобы перевернуть созданный объект. И убедитесь, что значение высоты совпадает со значением высоты настоящего объекта, чтобы не было ненужных дополнительных линий при расположении отражения.

К сожалению, используя этот метод, нельзя простым способом создать приятный эффект отражения в браузере Firefox. Код выше создаст просто отражение, без эффекта исчезания.

(Источник изображения: Strange Bedfellows)

Демонстрация работы – Скачать исходный код

Автор урока Thoriq Firdaus

Смотрите также:

• Создание измельчителя бумаги с кнопкой удаления при помощи CSS3 
• Создание галереи быстро меняющихся изображений с использованием CSS3
• Создаем окно чата с текстовыми облачками в CSS3